// components/LegendCard.jsx — bottom-left height legend
function LegendCard({ stats, density, collapsed, onToggle }) {
  const stops = [
    { c: 'oklch(0.74 0.16 50)',  v: stats.zMax.toFixed(2) },
    { c: 'oklch(0.55 0.18 295)', v: ((stats.zMin + stats.zMax) / 2).toFixed(2) },
    { c: 'oklch(0.55 0.14 240)', v: stats.zMin.toFixed(2) },
  ];
  return (
    <Card className={`sc-floater sc-floater-br sc-legend-card sc-density-${density}`} collapsed={collapsed}>
      <CardHeader>
        <div className="sc-card-hd-row">
          <CardTitle>Height (Z)</CardTitle>
          <CollapseBtn collapsed={collapsed} onClick={onToggle} />
        </div>
      </CardHeader>
      <Collapsible open={!collapsed}>
        <Separator />
        <CardContent className="sc-legend-content">
          <div className="sc-legend-bar" />
          <div className="sc-legend-labels">
            {stops.map((s, i) => (
              <div key={i} className="sc-legend-row">
                <span className="sc-legend-swatch" style={{ background: s.c }} />
                <span className="sc-mono">{s.v} m</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Collapsible>
    </Card>
  );
}

window.LegendCard = LegendCard;