import { useState, useRef } from 'react'
import { Canvas } from '@react-three/fiber'
import { Sky, Grid } from '@react-three/drei'
import { Character } from './Character'
import { Car } from './Car'
import { WorldBorder } from './WorldBorder'
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] }} gl={{ antialias: true }}>
      <Sky sunPosition={[100, 20, 100]} distance={5000} />
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />

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

      <Grid
        args={[2500, 2500]}
        fadeDistance={2000}
        sectionSize={10}
        sectionThickness={1}
        sectionColor="#ffffff"
        cellSize={1}
        cellThickness={0.5}
        cellColor="#aaccff"
      />

      <WorldBorder />

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