export type Status =
  | "verified"
  | "pending"
  | "unavailable"
  | "needs-changes"
  | "active"
  | "awaiting-verification";

const STATUS_CONFIG: Record<Status, { label: string; className: string }> = {
  verified: { label: "Verified", className: "bg-[#E8F2EC] text-forest border-forest" },
  pending: { label: "Pending review", className: "bg-[#FBF1E1] text-gold-deep border-gold" },
  unavailable: { label: "Unavailable", className: "bg-[#F5EAE6] text-clay border-clay" },
  "needs-changes": { label: "Needs changes", className: "bg-[#F5EAE6] text-clay border-clay" },
  active: { label: "Active", className: "bg-[#E8F2EC] text-forest border-forest" },
  "awaiting-verification": {
    label: "Awaiting verification",
    className: "bg-[#FBF1E1] text-gold-deep border-gold",
  },
};

export default function StatusBadge({ status, label }: { status: Status; label?: string }) {
  const config = STATUS_CONFIG[status];
  return (
    <span
      className={`inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-wider px-3.5 py-1.5 rounded-pill font-medium border ${config.className}`}
    >
      <span className="w-1.5 h-1.5 rounded-full bg-current" />
      {label ?? config.label}
    </span>
  );
}