import type { ReactNode } from "react";
import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * One empty state for the whole app. `page` is the first-run screen (nothing
 * imported yet); `inline` sits inside a card when a filter or a section comes
 * up empty.
 */
export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
  variant = "page",
  className,
}: {
  icon?: LucideIcon;
  title: string;
  description?: ReactNode;
  action?: ReactNode;
  variant?: "page" | "inline";
  className?: string;
}) {
  const page = variant === "page";
  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center text-center",
        page ? "py-16 gap-6" : "py-12 gap-3",
        className
      )}
    >
      {Icon &&
        (page ? (
          <div className="h-24 w-24 rounded-full bg-gradient-to-tr from-primary/10 to-primary/30 flex items-center justify-center border border-primary/20 shadow-inner">
            <Icon size={38} strokeWidth={1.5} className="text-primary/70" />
          </div>
        ) : (
          <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center">
            <Icon size={20} strokeWidth={1.5} className="text-muted-foreground" />
          </div>
        ))}
      <div className={cn("max-w-md", page ? "space-y-2" : "space-y-1")}>
        <h2 className={page ? "text-xl font-bold text-foreground" : "text-sm font-medium text-foreground"}>{title}</h2>
        {description && <p className={cn("text-muted-foreground", page ? "text-sm" : "text-xs")}>{description}</p>}
      </div>
      {action}
    </div>
  );
}