import React from 'react'
import { Group } from 'three'
import * as THREE from 'three'

interface MarkerProps {
    position: [number, number, number],
    color: string,
    onClick?: () => void
}

export default function Marker({ position, color, onClick }: MarkerProps) {

    const [positionState, setPositionState] = React.useState(position)
    
    // Return the marker object
    // return <primitive object={marker}  />
    return (
        <mesh position={positionState} rotation={[Math.PI,0,0]} onClick={onClick} onPointerOver={(e) => setPositionState([positionState[0], positionState[1], positionState[2] + 0.1])} onPointerOut={(e) => setPositionState(position)}>
            <coneGeometry args={[0.15, 0.6, 6]} />
            <meshStandardMaterial color={color} side={THREE.DoubleSide} />
        </mesh>
    )
}
