ErrorState

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { Button } from "@/components/ledger/button";
import {
  ExclamationTriangleIcon,
  LockClosedIcon,
  MagnifyingGlassMinusIcon,
  ServerStackIcon,
  SignalSlashIcon,
} from "@/components/ledger/icons";
import { InfoTip } from "@/components/ledger/info-tip";

type ErrorVariant = "network" | "permission" | "not-found" | "server" | "stale-data";

const ICONS = {
  network: SignalSlashIcon,
  "not-found": MagnifyingGlassMinusIcon,
  permission: LockClosedIcon,
  server: ServerStackIcon,
  "stale-data": ExclamationTriangleIcon,
} as const;

export interface ErrorStateProps extends React.ComponentPropsWithoutRef<"div"> {
  /**
   * The technical account of what failed. It is the least urgent thing on the
   * screen and the longest, so it lives behind the ⓘ beside the title — an
   * InfoTip rather than a Tooltip, because it opens on press and so survives
   * touch.
   */
  detail: string;
  onRetry?: () => void;
  onSupport?: () => void;
  /**
   * The one line of prose that stays visible. An error in a financial product
   * makes users worry something happened to their money; saying explicitly
   * that nothing did is worth more than the retry button — and worth more
   * than the paragraph explaining the outage.
   */
  reassurance: string;
  retryLabel?: string;
  title: string;
  variant?: ErrorVariant;
}

export const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(
  (
    {
      className,
      variant = "network",
      title,
      detail,
      reassurance,
      onRetry,
      retryLabel = "Try again",
      onSupport,
      ...props
    },
    ref,
  ) => {
    const Icon = ICONS[variant];
    return (
      <div
        className={cn(
          "flex flex-col items-center gap-4 rounded-xl border border-border bg-surface px-6 py-12 text-center",
          className,
        )}
        ref={ref}
        role="alert"
        {...props}
      >
        <div className="grid size-12 place-items-center rounded-md bg-negative-subtle">
          <Icon aria-hidden="true" className="size-5 text-negative" />
        </div>
        <div className="max-w-[360px] space-y-1.5">
          <p className="text-title-sm font-medium">
            {title}
            <InfoTip
              about={`What happened: ${title}`}
              className="text-left"
              triggerClassName="ml-1.5 align-[-1px]"
            >
              {detail}
            </InfoTip>
          </p>
          <p className="text-body text-text-secondary">{reassurance}</p>
        </div>
        <div className="flex gap-2">
          {onRetry ? (
            <Button onClick={onRetry} variant="primary">
              {retryLabel}
            </Button>
          ) : null}
          {onSupport ? (
            <Button onClick={onSupport} variant="secondary">
              Contact support
            </Button>
          ) : null}
        </div>
      </div>
    );
  },
);
ErrorState.displayName = "ErrorState";