'use client';

import { Canvas, useFrame } from '@react-three/fiber';
import { Float, Box, Sphere } from '@react-three/drei';
import { useRef } from 'react';
import * as THREE from 'three';

function RotatingLogo({ isScrolled }: { isScrolled: boolean }) {
  const group = useRef<THREE.Group>(null);
  
  useFrame((state, delta) => {
    if (group.current) {
      group.current.rotation.y += delta;
      group.current.rotation.x = Math.sin(state.clock.elapsedTime * 2) * 0.1;
    }
  });

  const color = isScrolled ? '#00bc84' : '#10b981';

  return (
    <Float speed={3} rotationIntensity={0.5} floatIntensity={2}>
      <group ref={group} scale={1.2}>
        {/* Abstract "J" shape for Jaiben */}
        <Box args={[0.25, 1.2, 0.25]} position={[0.2, 0, 0]}>
          <meshStandardMaterial color={color} roughness={0.1} metalness={0.8} />
        </Box>
        <Box args={[0.8, 0.25, 0.25]} position={[-0.075, -0.475, 0]}>
          <meshStandardMaterial color={color} roughness={0.1} metalness={0.8} />
        </Box>
        <Sphere args={[0.2, 32, 32]} position={[-0.3, 0.5, 0]}>
          <meshStandardMaterial color="#f97316" roughness={0.2} metalness={0.5} emissive="#f97316" emissiveIntensity={0.2} />
        </Sphere>
      </group>
    </Float>
  );
}

export default function Logo3D({ scrolled = false, className = "w-12 h-12" }: { scrolled?: boolean, className?: string }) {
  return (
    <div className={`${className} pointer-events-none relative z-10 flex-shrink-0`}>
      <Canvas 
        camera={{ position: [0, 0, 3.5], fov: 50 }} 
        gl={{ alpha: true, antialias: true }}
      >
        <ambientLight intensity={0.6} />
        <directionalLight position={[2, 5, 2]} intensity={1.5} />
        <directionalLight position={[-2, -2, 2]} intensity={0.5} color="#00bc84" />
        <RotatingLogo isScrolled={scrolled} />
      </Canvas>
    </div>
  );
}