type PillVariant = "brand" | "blue" | "amber" | "muted";

const styles: Record<PillVariant, string> = {
  brand: "bg-[#A855F7]/12 text-[#9333EA] border-[#A855F7]/25",
  blue: "bg-[#06B6D4]/12 text-[#0891b2] border-[#06B6D4]/25",
  amber: "bg-amber-100 text-amber-800 border-amber-200",
  muted: "bg-slate-100 text-nexus-muted border-slate-200",
};

interface ProgressPillProps {
  label: string;
  variant?: PillVariant;
  pulse?: boolean;
}

export function ProgressPill({ label, variant = "brand", pulse = false }: ProgressPillProps) {
  return (
    <span
      className={`inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium ${styles[variant]}`}
    >
      {pulse && (
        <span className="relative flex h-2 w-2" aria-hidden>
          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#A855F7] opacity-60 motion-reduce:animate-none" />
          <span className="relative inline-flex h-2 w-2 rounded-full bg-gradient-to-br from-[#A855F7] to-[#06B6D4]" />
        </span>
      )}
      {label}
    </span>
  );
}
