import type { LucideIcon } from "lucide-react";
import { Inbox } from "lucide-react";
import { LinkButton } from "@/components/ui/LinkButton";

export interface EmptyStateProps {
  icon?: LucideIcon;
  title: string;
  description?: string;
  actionLabel?: string;
  actionHref?: string;
}

/** No dead-end screens (Sprint 2 §21) — every empty state offers a next step. */
export function EmptyState({ icon: Icon = Inbox, title, description, actionLabel, actionHref }: EmptyStateProps) {
  return (
    <div className="flex flex-col items-center gap-3 py-20 text-center">
      <Icon className="size-8 text-slate-muted" aria-hidden="true" />
      <h3 className="font-display text-h3 font-normal text-ink">{title}</h3>
      {description && <p className="max-w-sm text-body-sm text-slate">{description}</p>}
      {actionLabel && actionHref && (
        <LinkButton href={actionHref} variant="secondary" size="sm" className="mt-3">
          {actionLabel}
        </LinkButton>
      )}
    </div>
  );
}