"use client";

import * as React from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { ContactShadows, OrbitControls, RoundedBox } from "@react-three/drei";
import type { Mesh } from "three";
import { cn } from "@/lib/utils";

function Product({ color }: { color: string }) {
  const ref = React.useRef<Mesh>(null);

  useFrame((state) => {
    if (!ref.current) return;
    ref.current.rotation.y = state.clock.elapsedTime * 0.4;
    ref.current.position.y = Math.sin(state.clock.elapsedTime * 1.1) * 0.08;
  });

  return (
    <RoundedBox ref={ref} args={[1.6, 2.4, 0.28]} radius={0.12} smoothness={6}>
      <meshStandardMaterial color={color} roughness={0.25} metalness={0.7} />
    </RoundedBox>
  );
}

const SWATCHES = ["#8b5cf6", "#0ea5e9", "#f43f5e", "#22c55e", "#f59e0b"];

export function ProductShowcase3D({
  colors = SWATCHES,
  height = 420,
  className,
}: {
  colors?: string[];
  height?: number;
  className?: string;
}) {
  const [color, setColor] = React.useState(colors[0]);

  return (
    <div
      className={cn("relative w-full overflow-hidden rounded-2xl border bg-background", className)}
      style={{ height }}
    >
      <Canvas shadows camera={{ position: [0, 0.4, 5], fov: 42 }} dpr={[1, 2]}>
        <ambientLight intensity={0.55} />
        <directionalLight position={[4, 6, 4]} intensity={2.4} castShadow />
        <pointLight position={[-4, 1, -3]} intensity={14} color="#60a5fa" />
        <Product color={color} />
        <ContactShadows position={[0, -1.5, 0]} opacity={0.45} scale={8} blur={2.4} far={3} />
        <OrbitControls enableZoom={false} enablePan={false} minPolarAngle={1} maxPolarAngle={2} />
      </Canvas>

      <div className="absolute bottom-5 left-1/2 flex -translate-x-1/2 gap-2 rounded-full border bg-background/80 p-1.5 backdrop-blur">
        {colors.map((swatch) => (
          <button
            key={swatch}
            onClick={() => setColor(swatch)}
            aria-label={"Colour " + swatch}
            className={cn(
              "size-6 rounded-full border-2 transition-transform",
              color === swatch ? "border-foreground scale-110" : "border-transparent",
            )}
            style={{ background: swatch }}
          />
        ))}
      </div>
    </div>
  );
}

Related components