import { useRef, useState } from 'react'
import * as everforest from '../_everforest.module.scss'
import { useGLTF } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

export default function ChatBubble(props) {
    const meshRef = useRef();
    const [hovered, setHovered] = useState(false);
    const [active, setActive] = useState(false);
    useFrame((_, delta) => (meshRef.current.rotation.y += delta));
    const {nodes} = useGLTF('../assets/message-bubble.glb');

    return (
        <mesh
            {...props}
            ref={meshRef}
            scale={active ? 3 : 2}
            onClick={(_) => setActive(!active)}
            geometry={nodes.Curve.geometry}
            onPointerOver={(_) => setHovered(true)}
            onPointerOut={(_) => setHovered(false)}>
            <meshStandardMaterial color={active ? everforest.blue : everforest.orange} />
        </mesh>
    )
}