import { PlusIcon } from "@heroicons/react/24/outline";
import { Button } from "./button";
import { cn } from "@/shared/utils";

interface EmptyStateProps {
  icon?: React.ReactNode | undefined;
  title: string;
  description?: string | undefined;
  action?:
    | {
        label: string;
        href?: string | undefined;
        onClick?: (() => void) | undefined;
      }
    | undefined;
  className?: string | undefined;
  variant?: "default" | "compact" | undefined;
}

export function EmptyState({
  icon,
  title,
  description,
  action,
  className,
  variant = "default",
}: EmptyStateProps) {
  const isCompact = variant === "compact";

  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center text-center",
        isCompact ? "py-8" : "py-12",
        className
      )}
    >
      {icon && (
        <div className={cn("text-muted-foreground/70 mb-4", isCompact ? "mb-3" : "mb-4")}>
          {icon}
        </div>
      )}

      <h3 className={cn("font-semibold text-foreground mb-2", isCompact ? "text-base" : "text-lg")}>
        {title}
      </h3>

      {description && (
        <p
          className={cn(
            "text-muted-foreground mb-6 max-w-md",
            isCompact ? "text-sm mb-4" : "text-base mb-6"
          )}
        >
          {description}
        </p>
      )}

      {action &&
        (action.href ? (
          <Button
            as="a"
            href={action.href}
            size={isCompact ? "sm" : "default"}
            leftIcon={<PlusIcon className="h-4 w-4" />}
          >
            {action.label}
          </Button>
        ) : (
          <Button
            onClick={action.onClick}
            size={isCompact ? "sm" : "default"}
            leftIcon={<PlusIcon className="h-4 w-4" />}
          >
            {action.label}
          </Button>
        ))}
    </div>
  );
}

export function SearchEmptyState({
  searchTerm,
  onClearSearch,
}: {
  searchTerm: string;
  onClearSearch?: () => void;
}) {
  return (
    <EmptyState
      title="No results found"
      description={`No results match "${searchTerm}". Try adjusting your search criteria.`}
      action={
        onClearSearch
          ? {
              label: "Clear search",
              onClick: onClearSearch,
            }
          : undefined
      }
      variant="compact"
    />
  );
}
