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

const config: Record<
  OrderStatus,
  { label: string; className: string; icon: typeof Clock3 }
> = {
  pending: {
    label: "Pending Verification",
    className: "bg-warning/15 text-warning",
    icon: Clock3,
  },
  approved: {
    label: "Approved",
    className: "bg-teal/15 text-teal-dim dark:text-teal",
    icon: CheckCircle2,
  },
  completed: {
    label: "Completed",
    className: "bg-success/15 text-success",
    icon: PackageCheck,
  },
  rejected: {
    label: "Rejected",
    className: "bg-danger/15 text-danger",
    icon: XCircle,
  },
};

export function StatusBadge({ status, compact }: { status: OrderStatus; compact?: boolean }) {
  const { label, className, icon: Icon } = config[status];
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-semibold",
        className
      )}
    >
      <Icon size={12} strokeWidth={2.5} />
      {compact ? label.replace(" Verification", "") : label}
    </span>
  );
}