"use client";

import { OrderStatus } from "@/lib/types";
import { cn } from "@/lib/cn";
import { useTranslation } from "@/lib/i18n/LanguageProvider";
import { Clock3, CheckCircle2, PackageCheck, XCircle } from "lucide-react";

const config: Record<
  OrderStatus,
  { key: string; className: string; icon: typeof Clock3 }
> = {
  pending: {
    key: "orderStepper.pendingVerification",
    className: "bg-gold/15 text-gold-dim dark:text-gold-bright",
    icon: Clock3,
  },
  approved: {
    key: "orderStepper.approved",
    className: "bg-teal/15 text-teal-dim dark:text-teal",
    icon: CheckCircle2,
  },
  completed: {
    key: "orderStepper.completed",
    className: "bg-teal/20 text-teal-dim dark:text-teal",
    icon: PackageCheck,
  },
  rejected: {
    key: "orderStepper.rejected",
    className: "bg-danger/15 text-danger",
    icon: XCircle,
  },
};

export function StatusPill({ status }: { status: OrderStatus }) {
  const { t } = useTranslation();
  const { key, className, icon: Icon } = config[status];
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold",
        className
      )}
    >
      <Icon size={14} strokeWidth={2.5} />
      {t(key)}
    </span>
  );
}