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

export function RiderFlag({ className }: { className?: string }) {

  return (

    <span

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

      style={{

        color: "var(--dk-signal)",

        borderColor: "color-mix(in srgb, var(--dk-signal) 45%, transparent)",

        backgroundColor: "var(--dk-signal-tint)",

      }}

      title="Flagged as a rider - added outside the bill's named subject"

    >

      <span aria-hidden="true">◆</span> Rider flag

    </span>

  );

}

export function ChangeTag({

  change,

  className,

}: {

  change: string;

  className?: string;

}) {

  const c = (change || "").toLowerCase();

  const color =

    c === "added"

      ? "var(--dk-yea)"

      : c === "removed"

        ? "var(--dk-nay)"

        : "var(--dk-hold)";

  return (

    <span

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

      style={{

        color,

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

      }}

    >

      {change || "changed"}

    </span>

  );

}