import * as React from 'react'
import { cn } from '../lib/cn'
import { Button } from '../primitives/button'

export interface EmptyStateProps {
  heading: string // one sentence, conversational, no exclamation marks
  action?: { label: string; href?: string; onClick?: () => void }
  className?: string
  // No icon, illustration, or description props — by design.
}

/**
 * Minimal empty state: one conversational sentence + at most one action.
 * No icon/illustration/description by design. Canonical copy comes from the
 * error-empty-states spec. Heading centered, muted, text-body-2 medium.
 */
export function EmptyState({ heading, action, className }: EmptyStateProps) {
  return (
    <div className={cn('flex flex-col items-center py-8', className)}>
      <p className="text-body-2 font-medium text-ink-soft text-center">{heading}</p>
      {action ? (
        action.href ? (
          <Button asChild variant="outline" size="sm" className="mt-4">
            <a href={action.href}>{action.label}</a>
          </Button>
        ) : (
          <Button variant="outline" size="sm" className="mt-4" onClick={action.onClick}>
            {action.label}
          </Button>
        )
      ) : null}
    </div>
  )
}