import { AlertCircle, WifiOff } from "lucide-react";
import { Button } from "@/components/ui/button";

type RemitDrawerErrorProps = {
  kind: "not_found" | "network";
  onRetry?: () => void;
  onClose: () => void;
};

const COPY = {
  not_found: {
    eyebrow: "NOT FOUND",
    message: "This remittance doesn't exist or has been removed.",
  },
  network: {
    eyebrow: "CONNECTION",
    message: "Couldn't reach the server. Check your connection and try again.",
  },
} as const;

/**
 * Error state for the remittance detail drawer (RemitDrawer).
 *
 * Two shapes — `not_found` (the remit id in the URL doesn't resolve on
 * the server, e.g. a stale deep link) and `network` (the request
 * failed). The not_found variant has no retry affordance (retrying won't
 * help), the network variant does when `onRetry` is supplied.
 *
 * Visual twin of `ClaimDrawerError` so the two drawers feel like one
 * component family — same icon size, same eyebrow color, same button
 * spacing.
 */
export function RemitDrawerError({
  kind,
  onRetry,
  onClose,
}: RemitDrawerErrorProps) {
  const { eyebrow, message } = COPY[kind];
  const Icon = kind === "network" ? WifiOff : AlertCircle;

  return (
    <div
      className="flex flex-col items-start gap-4 p-6 bg-[color:var(--m-surface)] text-[color:var(--m-ink-primary)]"
      role="alert"
      data-testid={`remit-drawer-error-${kind}`}
    >
      <div className="flex items-center gap-2">
        <Icon
          className="h-5 w-5 text-[color:var(--m-error)]"
          strokeWidth={1.75}
          aria-hidden
        />
        <span className="eyebrow text-[color:var(--m-error)]">
          {eyebrow}
        </span>
      </div>
      <p className="text-sm text-[color:var(--m-ink-secondary)] max-w-sm">{message}</p>
      <div className="flex items-center gap-2">
        {kind === "network" && onRetry ? (
          <Button variant="outline" size="sm" onClick={onRetry} data-testid="error-retry">
            Retry
          </Button>
        ) : null}
        <Button variant="ghost" size="sm" onClick={onClose} data-testid="error-close">
          Close
        </Button>
      </div>
    </div>
  );
}