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

export function VoteTally({

  yea,

  nay,

  present = 0,

  result,

  className,

}: {

  yea: number;

  nay: number;

  present?: number;

  result?: "passed" | "failed";

  className?: string;

}) {

  const total = Math.max(1, yea + nay + present);

  const yeaPct = (yea / total) * 100;

  const nayPct = (nay / total) * 100;

  const presentPct = (present / total) * 100;

  return (

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

      <div className="mb-2 flex items-baseline justify-between font-mono">

        <span className="label">Tally</span>

        {result ? (

          <span

            className="label"

            style={{

              color:

                result === "passed"

                  ? "var(--dk-yea)"

                  : "var(--dk-nay)",

            }}

          >

            {result === "passed" ? "Passed" : "Failed"}

          </span>

        ) : null}

      </div>

      <div

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

        role="img"

        aria-label={`Vote tally: ${yea} yea, ${nay} nay${present ? `, ${present} present` : ""}`}

      >

        <span style={{ width: `${yeaPct}%`, backgroundColor: "var(--dk-yea)" }} />

        <span style={{ width: `${nayPct}%`, backgroundColor: "var(--dk-nay)" }} />

        {present > 0 ? (

          <span style={{ width: `${presentPct}%`, backgroundColor: "var(--dk-ash-2)" }} />

        ) : null}

      </div>

      <div className="mt-2 grid grid-cols-3 gap-2 font-mono text-[13px]">

        <TallyCell label="Yea" value={yea} color="var(--dk-yea)" />

        <TallyCell label="Nay" value={nay} color="var(--dk-nay)" />

        <TallyCell

          label="Present"

          value={present}

          color="var(--dk-ash-2)"

          dim={present === 0}

        />

      </div>

    </div>

  );

}

function TallyCell({

  label,

  value,

  color,

  dim,

}: {

  label: string;

  value: number;

  color: string;

  dim?: boolean;

}) {

  return (

    <div className="border-l border-line pl-2">

      <div className="label flex items-center gap-1.5" style={{ color: dim ? "var(--dk-ash-2)" : color }}>

        <span

          aria-hidden="true"

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

          style={{ backgroundColor: color }}

        />

        {label}

      </div>

      <div

        className="mt-0.5 tabular-nums"

        style={{ color: dim ? "var(--dk-ash-2)" : "var(--dk-paper)" }}

      >

        {value}

      </div>

    </div>

  );

}