import { cn } from "@/lib/utils";
import { SHARE_COLORS, shareColor } from "./shareColors";

/**
 * One thin bar split into each item's share, with a 2px surface gap between
 * segments. Identity comes from the matching dot on each row below, so the
 * bar never relies on colour alone.
 */
export function WeightBar({ shares, label, className }: { shares: { key: string; share: number }[]; label: string; className?: string }) {
  const shown = shares.filter((s) => s.share > 0);
  const main = shown.slice(0, SHARE_COLORS.length);
  const other = shown.slice(SHARE_COLORS.length).reduce((s, x) => s + x.share, 0);
  const segments = [...main.map((s, i) => ({ ...s, color: shareColor(i) })), ...(other > 0 ? [{ key: "other", share: other, color: shareColor(99) }] : [])];
  return (
    <div role="img" aria-label={label} className={cn("flex h-1.5 w-full gap-[2px] overflow-hidden rounded-full", className)}>
      {segments.length === 0 ? (
        <div className="h-full w-full bg-muted" />
      ) : (
        segments.map((s) => (
          <div key={s.key} className="h-full first:rounded-l-full last:rounded-r-full" style={{ width: `${s.share}%`, backgroundColor: s.color }} />
        ))
      )}
    </div>
  );
}