// src/components/PointsOnGlobe.jsx
import React from 'react';
import { Sphere } from '@react-three/drei';
import { latLonToCartesian } from '../utils/threeHelpers';

export default function PointsOnGlobe({ locations, onPointClick }) {
    return (
        <>
            {locations.map((loc) => {
                const [x, y, z] = latLonToCartesian(loc.lat, loc.lon, 1.005); // รัศมีให้สูงกว่าผิวโลกเล็กน้อย
                return (
                    <Sphere
                        key={loc.id}
                        args={[0.015, 16, 16]} // ขนาดจุด
                        position={[x, y, z]}
                        onClick={() => onPointClick(loc)} // ส่งข้อมูลจุดที่คลิกไปให้ parent
                    >
                        <meshBasicMaterial color="#00ffff" /> {/* สีฟ้า Cyan */}
                    </Sphere>
                );
            })}
        </>
    );
}