import type { RegionMap } from '@shared/protocol';

/**
 * Small bottom-left legend mapping each nation on the map to its stable color.
 * Rendered by the game screen as a minimal floating window over the map.
 */
export default function MapLegend({ regions }: { regions: RegionMap }) {
  const owners = new Map<string, { color: string; owner: string }>();
  for (const r of Object.values(regions)) {
    if (r.ownerId && !owners.has(r.ownerId)) owners.set(r.ownerId, { color: r.color, owner: r.owner });
  }
  const list = [...owners.entries()].sort((a, b) => a[1].owner.localeCompare(b[1].owner));
  if (list.length === 0) return null;
  return (
    <div
      data-testid="map-legend"
      className="max-h-[52vh] overflow-y-auto p-2.5"
    >
      <div className="mb-1.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
        Nations
      </div>
      <ul className="space-y-1">
        {list.map(([id, o]) => (
          <li key={id} data-testid="map-legend-item" className="flex items-center gap-1.5 text-xs">
            <span className="inline-block size-2.5 shrink-0 rounded-sm" style={{ background: o.color }} />
            <span className="truncate">{o.owner}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}