import { Body1, Caption1, makeStyles, mergeClasses, tokens } from '@fluentui/react-components'
import { SPACE } from './tokens'

/**
 * One shared empty-state block (L116/L117). The screens had drifted into three
 * shapes — Downloads (icon + line), History (colored badge + line + sub-hint),
 * Library (icon + line, no sub-hint) — and the Terminal / Diagnostics "empty"
 * text wasn't a centered block at all (inline text). This centers them all on one
 * structure: an optional focal `icon` (a hero glyph or a colored badge), a `Body1`
 * message at normal foreground, and an optional muted `hint` line.
 *
 * `compact` swaps the tall screen-level padding (56px) for a smaller inset (32px),
 * for placeholders that sit inside an already-populated screen (the Terminal log,
 * the Diagnostics list) rather than filling an empty one.
 */
const useStyles = makeStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: SPACE.tight,
    padding: '56px 16px',
    // The container is muted, so a hero glyph and the hint line read as secondary;
    // the message overrides back to the normal foreground so it stays legible.
    color: tokens.colorNeutralForeground3,
    textAlign: 'center'
  },
  compact: {
    padding: '32px 16px'
  },
  message: {
    color: tokens.colorNeutralForeground1
  }
})

export function EmptyState({
  icon,
  message,
  hint,
  compact = false,
  className
}: {
  icon?: React.ReactNode
  message: React.ReactNode
  hint?: React.ReactNode
  compact?: boolean
  className?: string
}): React.JSX.Element {
  const styles = useStyles()
  return (
    <div className={mergeClasses(styles.root, compact && styles.compact, className)}>
      {icon}
      <Body1 className={styles.message}>{message}</Body1>
      {hint && <Caption1>{hint}</Caption1>}
    </div>
  )
}
