import React from 'react'
import * as THREE from 'three'

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

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

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