"use client";

import { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";

function RotatingBox() {
  const meshRef = useRef(null);

  useFrame((_, delta) => {
    if (meshRef.current) {
      meshRef.current.rotation.x += delta * 0.5;
      meshRef.current.rotation.y += delta * 0.8;
    }
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1.5, 1.5, 1.5]} />
      <meshStandardMaterial color="#4f8ef7" />
    </mesh>
  );
}

export default function ThreeScene() {
  return (
    <Canvas
      style={{ width: 400, height: 400 }}
      camera={{ position: [0, 0, 4], fov: 50 }}
    >
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} intensity={1} />
      <RotatingBox />
    </Canvas>
  );
}