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

export function EmptyState({
  title,
  cta,
  onCta,
  icon: Icon = Inbox
}: {
  title: string;
  cta?: string;
  onCta?: () => void;
  icon?: LucideIcon;
}) {
  return (
    <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-ink-200 px-6 py-14 text-center">
      <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-ink-100">
        <Icon className="h-5 w-5 text-ink-400" aria-hidden="true" />
      </div>
      <p className="text-sm text-ink-500">{title}</p>
      {cta && onCta && (
        <Button size="sm" className="mt-4" onClick={onCta}>
          {cta}
        </Button>
      )}
    </div>
  );
}