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

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

export type PartySlice = { party: PartyCode; count: number };

export function PartySplitBar({

  slices,

  className,

  ariaLabel,

}: {

  slices: PartySlice[];

  className?: string;

  ariaLabel: string;

}) {

  const order: PartyCode[] = ["D", "I", "R"];

  const sorted = [...slices].sort(

    (a, b) => order.indexOf(a.party) - order.indexOf(b.party)

  );

  const total = Math.max(1, sorted.reduce((n, s) => n + s.count, 0));

  return (

    <div className={clsx("w-full", className)}>

      <div

        className="flex h-2 w-full overflow-hidden rounded-[2px] border border-line"

        role="img"

        aria-label={ariaLabel}

      >

        {sorted.map((s) => (

          <span

            key={s.party}

            style={{

              width: `${(s.count / total) * 100}%`,

              backgroundColor: partyToken(s.party),

            }}

          />

        ))}

      </div>

      <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 font-mono text-[12px]">

        {sorted.map((s) => (

          <span key={s.party} className="inline-flex items-center gap-1.5">

            <span

              aria-hidden="true"

              className="inline-block h-1.5 w-1.5 rounded-full"

              style={{ backgroundColor: partyToken(s.party) }}

            />

            <span className="label">

              {s.party === "D" ? "Dem." : s.party === "R" ? "Rep." : "Ind."}

            </span>

            <span className="tabular-nums text-paper">{s.count}</span>

          </span>

        ))}

      </div>

    </div>

  );

}