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

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

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-gray-400 mb-4", isCompact ? "mb-3" : "mb-4")}>{icon}</div>}

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

      {description && (
        <p
          className={cn(
            "text-gray-500 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"}>
            <PlusIcon className="h-4 w-4 mr-2" />
            {action.label}
          </Button>
        ) : (
          <Button onClick={action.onClick} size={isCompact ? "sm" : "default"}>
            <PlusIcon className="h-4 w-4 mr-2" />
            {action.label}
          </Button>
        ))}
    </div>
  );
}

// Specific empty states for common use cases
export function NoDataEmptyState({
  title = "No data available",
  description = "There's no data to display at the moment.",
  className,
}: {
  title?: string;
  description?: string;
  className?: string;
}) {
  return (
    <EmptyState title={title} description={description} className={className} variant="compact" />
  );
}

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"
    />
  );
}

export function FilterEmptyState({ onClearFilters }: { onClearFilters?: () => void }) {
  return (
    <EmptyState
      title="No results match your filters"
      description="Try adjusting or clearing your filters to see more results."
      action={
        onClearFilters
          ? {
              label: "Clear filters",
              onClick: onClearFilters,
            }
          : undefined
      }
      variant="compact"
    />
  );
}
