import { Card } from "./Card";
import { cn } from "@/lib/utils";

/**
 * EmptyState — message centré pour pages vides ou écrans en attente.
 * - icon optionnel en SVG/Lucide
 * - title font-display, body Inter
 * - cta optionnel (slot React)
 */
type EmptyStateProps = {
  icon?: React.ReactNode;
  title: React.ReactNode;
  description?: React.ReactNode;
  cta?: React.ReactNode;
  className?: string;
  /** Tone "draft" pour les écrans pas encore implémentés. */
  draft?: boolean;
};

export function EmptyState({
  icon,
  title,
  description,
  cta,
  className,
  draft = false,
}: EmptyStateProps) {
  return (
    <Card
      variant="flat"
      padding="lg"
      className={cn(
        "flex flex-col items-center text-center min-h-[280px] justify-center",
        draft && "border border-dashed border-line bg-cream",
        className,
      )}
    >
      {icon && <div className="text-ink-3 mb-3">{icon}</div>}
      <h2 className="font-display text-[22px] font-semibold tracking-[-0.018em] text-ink">
        {title}
      </h2>
      {description && (
        <p className="mt-2 max-w-md text-[14.5px] leading-relaxed text-ink-2">
          {description}
        </p>
      )}
      {cta && <div className="mt-6">{cta}</div>}
    </Card>
  );
}
