export function SurfaceList({
  surfaces,
  active,
  onSelect,
}: {
  surfaces: string[];
  active: string | null;
  onSelect: (id: string) => void;
}) {
  return (
    <div style={{ width: 160, background: "#1a1a1a", color: "#ccc", padding: 8 }}>
      <div style={{ opacity: 0.6, fontSize: 11, marginBottom: 8 }}>SURFACES</div>
      {surfaces.map((id) => (
        <div
          key={id}
          onClick={() => onSelect(id)}
          style={{
            padding: "4px 6px",
            cursor: "pointer",
            borderRadius: 4,
            background: id === active ? "#333" : "transparent",
            fontFamily: "monospace",
            fontSize: 12,
          }}
        >
          {id}
        </div>
      ))}
    </div>
  );
}