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

interface ErrorStateProps {
  title?: string | undefined;
  message?: string | undefined;
  onRetry?: (() => void) | undefined;
  retryLabel?: string | undefined;
  className?: string | undefined;
  variant?: "page" | "card" | "inline" | undefined;
}

export function ErrorState({
  title = "Something went wrong",
  message = "An unexpected error occurred. Please try again.",
  onRetry,
  retryLabel = "Try again",
  className,
  variant = "card",
}: ErrorStateProps) {
  const baseClasses = "flex flex-col items-center justify-center text-center";

  const variantClasses = {
    page: "min-h-[400px] py-12",
    card: "bg-card text-card-foreground border border-danger/25 rounded-2xl p-6 shadow-md",
    inline: "bg-danger-soft border border-danger/25 rounded-md p-4",
  };

  const iconSizes = {
    page: "h-16 w-16",
    card: "h-12 w-12",
    inline: "h-5 w-5",
  };

  const titleSizes = {
    page: "text-xl",
    card: "text-lg",
    inline: "text-sm",
  };

  const messageSizes = {
    page: "text-base",
    card: "text-sm",
    inline: "text-sm",
  };

  return (
    <div className={cn(baseClasses, variantClasses[variant], className)} suppressHydrationWarning>
      <div
        className={cn("text-danger mb-4", variant === "inline" && "flex-shrink-0")}
        suppressHydrationWarning
      >
        <ExclamationTriangleIcon className={iconSizes[variant]} />
      </div>

      <div className={variant === "inline" ? "ml-3 flex-1" : ""} suppressHydrationWarning>
        <h3
          className={cn("font-semibold text-foreground mb-2", titleSizes[variant])}
          suppressHydrationWarning
        >
          {title}
        </h3>

        <p
          className={cn("text-muted-foreground mb-4 max-w-md", messageSizes[variant])}
          suppressHydrationWarning
        >
          {message}
        </p>

        {onRetry && (
          <Button
            onClick={onRetry}
            variant="outline"
            size={variant === "inline" ? "sm" : "default"}
            className="text-danger border-danger/30 hover:bg-danger-soft"
          >
            <ArrowPathIcon className="h-4 w-4 mr-2" />
            {retryLabel}
          </Button>
        )}
      </div>
    </div>
  );
}
