// components/InfoCard.jsx — top-left survey stats card
function InfoCard({ stats, shownPts, totalPts, density, collapsed, onToggle }) {
  const rows = [
    { k: 'Points',   v: <span className="sc-num sc-accent">{shownPts}<span className="sc-muted"> / {totalPts}</span></span> },
    { k: 'X range',  v: <span className="sc-num">{stats.xMin.toFixed(2)} ~ {stats.xMax.toFixed(2)} m</span> },
    { k: 'Y range',  v: <span className="sc-num">{stats.yMin.toFixed(2)} ~ {stats.yMax.toFixed(2)} m</span> },
    { k: 'Z range',  v: <span className="sc-num">{stats.zMin.toFixed(2)} ~ {stats.zMax.toFixed(2)} m</span> },
    { k: 'Max dist', v: <span className="sc-num">{stats.sMax.toFixed(2)} m</span> },
  ];
  return (
    <Card className={`sc-floater sc-floater-tl sc-density-${density}`} collapsed={collapsed}>
      <CardHeader>
        <div className="sc-card-hd-row">
          <div>
            <CardTitle>Survey info</CardTitle>
            <CardDescription>Live measurement stats</CardDescription>
          </div>
          <CollapseBtn collapsed={collapsed} onClick={onToggle} />
        </div>
      </CardHeader>
      <Collapsible open={!collapsed}>
        <Separator />
        <CardContent>
          <div className="sc-kv">
            {rows.map((r, i) => (
              <div key={i} className="sc-kv-row">
                <span className="sc-kv-k">{r.k}</span>
                <span className="sc-kv-v">{r.v}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Collapsible>
    </Card>
  );
}

window.InfoCard = InfoCard;