"use client";

import * as React from "react";
import { CircleAlertIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";
import { cn } from "@/lib/utils";

interface ErrorStateProps {
  /** Overrides the default `t("errors.title")` */
  title?: React.ReactNode;
  /** Overrides the default `t("errors.description")` */
  description?: React.ReactNode;
  /** Shows a retry button when provided (failed query refetch, error-boundary reset) */
  onRetry?: () => void;
  /** Overrides the default `t("errors.retry")` button label */
  retryLabel?: React.ReactNode;
  className?: string;
}

/**
 * Error placeholder — mirror of EmptyState with the mistake/destructive
 * palette and an optional retry action. Defaults are fully i18n'd so callers
 * can drop it in with no props: `<ErrorState onRetry={refetch} />`.
 */
function ErrorState({
  title,
  description,
  onRetry,
  retryLabel,
  className,
}: ErrorStateProps) {
  const { t } = useTranslation();

  return (
    <div
      data-slot="error-state"
      className={cn(
        "flex w-full flex-col items-center justify-center gap-2 px-4 py-10 text-center",
        className,
      )}
    >
      <div className="mb-4 flex size-36 items-center justify-center rounded-full bg-mistake-light text-destructive [&_svg:not([class*='size-'])]:size-14">
        <CircleAlertIcon strokeWidth={1.5} />
      </div>
      <Typography as="h3" variant="h2">
        {title ?? t("errors.title")}
      </Typography>
      <Typography as="p" variant="body" color="secondary">
        {description ?? t("errors.description")}
      </Typography>
      {onRetry && (
        <div className="mt-4 w-full max-w-sm">
          <Button variant="secondary" className="w-full" onClick={onRetry}>
            {retryLabel ?? t("errors.retry")}
          </Button>
        </div>
      )}
    </div>
  );
}

export { ErrorState };