import type { ReactNode } from 'react';
import { Button } from './Button';

interface EmptyStateProps {
  icon?: ReactNode;
  title: string;
  subtitle?: string;
  action?: {
    label: string;
    onClick: () => void;
  };
  compact?: boolean;
  className?: string;
}

/**
 * Ethos empty state — icon, message, primary action. No illustrations.
 * Matches the Ethos spec for zero-state surfaces.
 */
export function EmptyState({
  icon,
  title,
  subtitle,
  action,
  compact = false,
  className = '',
}: EmptyStateProps) {
  if (compact) {
    return (
      <div
        className={`flex flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border py-10 text-center animate-fade-in ${className}`}
      >
        {icon && <span className="text-muted">{icon}</span>}
        <div className="font-medium text-text text-sm">{title}</div>
        {subtitle && <div className="text-xs text-muted">{subtitle}</div>}
        {action && (
          <Button variant="secondary" size="sm" onClick={action.onClick}>
            {action.label}
          </Button>
        )}
      </div>
    );
  }
  return (
    <div
      className={`flex flex-col items-center justify-center gap-3 rounded-md border border-dashed border-border py-16 text-center animate-fade-in ${className}`}
    >
      {icon && <span className="text-muted">{icon}</span>}
      <div>
        <div className="font-semibold text-text">{title}</div>
        {subtitle && <div className="mt-1 text-sm text-muted">{subtitle}</div>}
      </div>
      {action && (
        <Button variant="secondary" size="md" onClick={action.onClick}>
          {action.label}
        </Button>
      )}
    </div>
  );
}
