import { findingsMix } from "../../logic/charts";
import { cn } from "../kit";
import { tierLook } from "./tiers";

/** One thin bar split by tier, with every tier and its count in words underneath. */
export function FindingsMix({ findings, layout = "list", className }: { findings: { tier: string }[]; layout?: "list" | "inline"; className?: string }) {
  const mix = findingsMix(findings);
  if (!mix.total) return null;
  const shown = layout === "inline" ? mix.tiers.filter((t) => t.count) : mix.tiers;
  return (
    <div className={cn("flex flex-col gap-2.5", className)}>
      <div aria-hidden="true" className="flex h-2.5 gap-[3px]">
        {mix.tiers
          .filter((t) => t.count)
          .map((t) => (
            <span key={t.tier} className={cn("min-w-1.5 rounded-full", tierLook[t.tier].bar)} style={{ flexGrow: t.count, flexBasis: 0 }} />
          ))}
      </div>
      <ul aria-label="Findings by tier" className={cn("m-0 list-none p-0", layout === "inline" ? "flex flex-wrap gap-x-4 gap-y-1" : "flex flex-col")}>
        {shown.map((t) => (
          <li
            key={t.tier}
            className={cn(
              "flex items-center gap-2 text-[13px] text-body",
              layout === "list" && "py-2 text-[13.5px] shadow-[inset_0_-1px_0_var(--color-hairline)] last:shadow-none",
              !t.count && "text-subtle",
            )}
          >
            <span aria-hidden="true" className={cn("size-2 shrink-0 rounded-full", tierLook[t.tier].bar, !t.count && "opacity-40")} />
            <span className={layout === "list" ? "flex-1" : undefined}>{t.label}</span>
            <span className={cn("font-mono text-[13px] font-medium tabular-nums", t.count ? "text-ink" : "text-subtle")}>{t.count}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}