import type { ReactNode } from 'react';
import { cn } from '../../lib/cn';

export interface EmptyStateProps {
  /** Optional leading icon. */
  icon?: ReactNode;
  title: string;
  hint?: string;
  /** Optional action (e.g. a Button). */
  action?: ReactNode;
  className?: string;
}

/** Centered placeholder for empty lists / error fallbacks. */
export function EmptyState({ icon, title, hint, action, className }: EmptyStateProps) {
  return (
    <div className={cn('flex flex-col items-center justify-center gap-2 px-6 py-12 text-center', className)}>
      {icon && <div className="text-faint mb-1">{icon}</div>}
      <div className="text-sm font-semibold text-strong">{title}</div>
      {hint && <div className="text-xs text-faint max-w-[36ch]">{hint}</div>}
      {action && <div className="mt-3">{action}</div>}
    </div>
  );
}