import { useState, useRef } from 'react'
import { Canvas } from '@react-three/fiber'
import { Sky } from '@react-three/drei'
import { Character } from './Character'
import { Car } from './Car'
import { Mesh } from 'three'

export default function App() {
  const [isDriving, setIsDriving] = useState(false)
  const carRef = useRef<Mesh>(null)

  return (
    <Canvas camera={{ position: [0, 5, 10] }}>
      <Sky sunPosition={[100, 20, 100]} />
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />

      {/* Ground */}
      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]}>
        <planeGeometry args={[500, 500]} />
        <meshStandardMaterial color="#55aaff" />
      </mesh>

      <Character
        isDriving={isDriving}
        onEnter={() => setIsDriving(true)}
        carRef={carRef}
      />
      <Car
        ref={carRef}
        isDriving={isDriving}
        onExit={() => setIsDriving(false)}
      />
    </Canvas>
  )
}
