/**
 * Controls
 * Provides the manual camera and model rotation pad shown over the 3D viewport,
 * including directional nudges and a reset action.
 */
import React from 'react';
import { Button } from "@/components/ui/button";
import { 
  ArrowUp, ArrowDown, ArrowLeft, ArrowRight, 
  ArrowUpLeft, ArrowUpRight, ArrowDownLeft, ArrowDownRight, RotateCcw 
} from 'lucide-react';

export default function Controls({ onRotate, onReset }) {
  return (
    <div className="absolute top-6 left-6 z-[100] flex flex-col gap-4 pointer-events-auto">
      <div className="p-4 bg-black/60 backdrop-blur-xl border border-white/10 rounded-3xl shadow-2xl">
        <div className="grid grid-cols-3 gap-1">
          <Button variant="ghost" size="icon" className="text-white hover:bg-white/20" onClick={() => { onRotate('y', 0.4); onRotate('x', 0.4); }}><ArrowUpLeft className="w-5 h-5" /></Button>
          <Button variant="ghost" size="icon" className="text-white hover:bg-white/20" onClick={() => onRotate('x', 0.4)}><ArrowUp className="w-5 h-5" /></Button>
          <Button variant="ghost" size="icon" className="text-white hover:bg-white/20" onClick={() => { onRotate('y', -0.4); onRotate('x', 0.4); }}><ArrowUpRight className="w-5 h-5" /></Button>
          <Button variant="ghost" size="icon" className="text-white hover:bg-white/20" onClick={() => onRotate('y', 0.4)}><ArrowLeft className="w-5 h-5" /></Button>
          <Button variant="default" size="icon" className="bg-blue-600 hover:bg-blue-500 text-white rounded-full shadow-lg" onClick={onReset}><RotateCcw className="w-4 h-4" /></Button>
          <Button variant="ghost" size="icon" className="text-white hover:bg-white/20" onClick={() => onRotate('y', -0.4)}><ArrowRight className="w-5 h-5" /></Button>
          <Button variant="ghost" size="icon" className="text-white hover:bg-white/20" onClick={() => { onRotate('y', 0.4); onRotate('x', -0.4); }}><ArrowDownLeft className="w-5 h-5" /></Button>
          <Button variant="ghost" size="icon" className="text-white hover:bg-white/20" onClick={() => onRotate('x', -0.4)}><ArrowDown className="w-5 h-5" /></Button>
          <Button variant="ghost" size="icon" className="text-white hover:bg-white/20" onClick={() => { onRotate('y', -0.4); onRotate('x', -0.4); }}><ArrowDownRight className="w-5 h-5" /></Button>
        </div>
      </div>
    </div>
  );
}