'use client'
import { useRef } from 'react'
import { useFrame, Canvas } from '@react-three/fiber'
import { OrbitControls, MeshWobbleMaterial } from '@react-three/drei'

export function Cube() {
  const meshRef = useRef()
  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.x += 0.01
      meshRef.current.rotation.y += 0.01
    }
  })
  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <MeshWobbleMaterial factor={0.6} speed={1} color="orange" />
    </mesh>
  )
}

export default function App() {
  return (
    <Canvas style={{ height: '90vh' }}>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <Cube />
      <OrbitControls />
    </Canvas>
  )
}