components/Controls.jsx

import { 
  ZoomIn, 
  ZoomOut, 
  RotateCcw, 
  Maximize2, 
  Download,
  Share2,
  Info
} from 'lucide-react';

export default function Controls({ 
  onReset, 
  onZoomIn, 
  onZoomOut, 
  onFullscreen,
  worldData 
}) {
  return (
    <div className="absolute top-4 right-4 flex flex-col gap-2">
      <button
        onClick={onZoomIn}
        className="p-2 bg-slate-800/80 hover:bg-slate-700 rounded-lg text-slate-300 hover:text-white transition-colors glass-panel"
        title="Zoom In"
      >
        <ZoomIn className="w-5 h-5" />
      </button>
      
      <button
        onClick={onZoomOut}
        className="p-2 bg-slate-800/80 hover:bg-slate-700 rounded-lg text-slate-300 hover:text-white transition-colors glass-panel"
        title="Zoom Out"
      >
        <ZoomOut className="w-5 h-5" />
      </button>
      
      <button
        onClick={onReset}
        className="p-2 bg-slate-800/80 hover:bg-slate-700 rounded-lg text-slate-300 hover:text-white transition-colors glass-panel"
        title="Reset View"
      >
        <RotateCcw className="w-5 h-5" />
      </button>
      
      <button
        onClick={onFullscreen}
        className="p-2 bg-slate-800/80 hover:bg-slate-700 rounded-lg text-slate-300 hover:text-white transition-colors glass-panel"
        title="Fullscreen"
      >
        <Maximize2 className="w-5 h-5" />
      </button>
      
      <div className="w-px h-4 bg-slate-700 mx-auto"></div>
      
      <button
        className="p-2 bg-slate-800/80 hover:bg-slate-700 rounded-lg text-slate-300 hover:text-white transition-colors glass-panel"
        title="Download Scene"
      >
        <Download className="w-5 h-5" />
      </button>
      
      <button
        className="p-2 bg-slate-800/80 hover:bg-slate-700 rounded-lg text-slate-300 hover:text-white transition-colors glass-panel"
        title="Share"
      >
        <Share2 className="w-5 h-5" />
      </button>
    </div>
  );
}