import { clsx } from "@/lib/cx";

import { partyToken, type PartyCode } from "@/lib/neutrality";

export function PartyTag({

  party,

  className,

}: {

  party: PartyCode;

  className?: string;

}) {

  const color = partyToken(party);

  const name = party === "D" ? "D" : party === "R" ? "R" : "I";

  return (

    <span

      className={clsx("pill", className)}

      style={{

        color,

        borderColor: `color-mix(in srgb, ${color} 40%, transparent)`,

      }}

      title={party === "D" ? "Democratic" : party === "R" ? "Republican" : "Independent"}

    >

      {name}

    </span>

  );

}