import { cn } from "@/lib/utils";
import type { TransferStatus } from "@/types";
import {
  CheckCircle2,
  Clock,
  Loader2,
  Send,
  XCircle,
  Ban,
} from "lucide-react";
import { useTranslation } from "@/hooks/useTranslation";

const ICONS = {
  pending: Clock,
  processing: Loader2,
  in_transit: Send,
  delivered: CheckCircle2,
  failed: XCircle,
  cancelled: Ban,
} as const;

const STYLES: Record<TransferStatus, string> = {
  pending:
    "bg-amber-50 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300",
  processing:
    "bg-amber-50 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300",
  in_transit:
    "bg-brand-50 text-brand-700 dark:bg-brand-500/15 dark:text-brand-300",
  delivered:
    "bg-accent-50 text-accent-700 dark:bg-accent-500/15 dark:text-accent-300",
  failed: "bg-rose-50 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300",
  cancelled:
    "bg-slate-100 text-slate-500 dark:bg-slate-800/80 dark:text-slate-400 line-through",
};

interface Props {
  status: TransferStatus;
  className?: string;
  size?: "sm" | "md";
}

export function StatusBadge({ status, className, size = "sm" }: Props) {
  const { t } = useTranslation();
  const Icon = ICONS[status];
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-full font-semibold",
        size === "sm" ? "px-2.5 py-0.5 text-xs" : "px-3 py-1 text-sm",
        STYLES[status],
        className,
      )}
    >
      <Icon
        className={cn(
          size === "sm" ? "h-3 w-3" : "h-3.5 w-3.5",
          status === "processing" && "animate-spin",
          status === "in_transit" && "rtl:-scale-x-100",
        )}
        aria-hidden
      />
      {t(`app.transactions.status.${status}`)}
    </span>
  );
}