import type { ComponentType, ReactNode } from "react";
import Link from "next/link";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type Action = {
  label: string;
  href: string;
};

/**
 * Shared "nothing here yet" state — replaces the ad-hoc dashed-border boxes that used
 * to be copy-pasted per page (icon + one line of muted text, inconsistent spacing,
 * only some had a CTA). One consistent, warmer treatment: icon in a soft tinted
 * circle, a real heading instead of just a muted caption, and an optional primary/
 * secondary action.
 */
export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
  secondaryAction,
  actionSlot,
  compact = false,
  className,
}: {
  icon: ComponentType<{ className?: string }>;
  title: string;
  description?: string;
  action?: Action;
  secondaryAction?: Action;
  /** Arbitrary action element (e.g. a button that opens a dialog) instead of a plain Link. */
  actionSlot?: ReactNode;
  /** Smaller variant for empty states nested inside a section rather than a full page. */
  compact?: boolean;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center text-center rounded-2xl border border-border/60 bg-gradient-to-b from-muted/40 to-transparent",
        compact ? "gap-2 px-6 py-10" : "gap-3 px-6 py-16",
        className
      )}
    >
      <div className={cn(
        "flex items-center justify-center rounded-full bg-primary/10 text-primary",
        compact ? "h-11 w-11" : "h-14 w-14"
      )}>
        <Icon className={compact ? "h-5 w-5" : "h-6 w-6"} />
      </div>
      <div className="space-y-1">
        <p className={cn("font-semibold text-foreground", compact ? "text-sm" : "text-base")}>{title}</p>
        {description && (
          <p className={cn("text-muted-foreground max-w-sm text-balance", compact ? "text-xs" : "text-sm")}>
            {description}
          </p>
        )}
      </div>
      {(action || secondaryAction || actionSlot) && (
        <div className="flex items-center gap-2 mt-2">
          {action && (
            <Link href={action.href} className={cn(buttonVariants({ size: compact ? "sm" : "default" }))}>
              {action.label}
            </Link>
          )}
          {secondaryAction && (
            <Link href={secondaryAction.href} className={cn(buttonVariants({ variant: "outline", size: compact ? "sm" : "default" }))}>
              {secondaryAction.label}
            </Link>
          )}
          {actionSlot}
        </div>
      )}
    </div>
  );
}