import { Eye, Grid3X3 } from 'lucide-react';
import { Slider } from '@/components/ui/slider';
import { Button } from '@/components/ui/button';
import { useModelStore } from '@/stores/useModelStore';

export function ViewerControls() {
  const { opacity, setOpacity, renderMode, setRenderMode } = useModelStore();

  return (
    <div className="absolute bottom-4 left-4 z-10 flex items-end gap-3">
      {/* Opacity slider */}
      <div className="rounded-lg border bg-card/90 backdrop-blur-sm p-3 shadow-lg w-56">
        <div className="flex items-center justify-between mb-2">
          <div className="flex items-center gap-2">
            <Eye className="h-3.5 w-3.5 text-primary" />
            <span className="font-mono text-xs text-muted-foreground">Opacidade</span>
          </div>
          <span className="font-mono text-xs text-foreground">{Math.round(opacity * 100)}%</span>
        </div>
        <Slider
          value={[opacity * 100]}
          min={0}
          max={100}
          step={1}
          onValueChange={([v]) => setOpacity(v / 100)}
        />
      </div>

      {/* Render mode toggle */}
      <Button
        variant={renderMode === 'wireframe' ? 'default' : 'outline'}
        size="sm"
        className="gap-2 h-9"
        onClick={() => setRenderMode(renderMode === 'solid' ? 'wireframe' : 'solid')}
      >
        <Grid3X3 className="h-3.5 w-3.5" />
        <span className="font-mono text-xs">
          {renderMode === 'wireframe' ? 'Wireframe' : 'Sólido'}
        </span>
      </Button>
    </div>
  );
}