import { Camera, X, Download } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useModelStore } from '@/stores/useModelStore';

export function ScreenshotGallery() {
  const { screenshots, removeScreenshot, clearScreenshots } = useModelStore();

  if (screenshots.length === 0) return null;

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <h3 className="font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
          Capturas ({screenshots.length})
        </h3>
        <Button variant="ghost" size="sm" className="h-6 text-[10px]" onClick={clearScreenshots}>
          Limpar
        </Button>
      </div>
      <div className="grid grid-cols-2 gap-2">
        {screenshots.map((src, i) => (
          <div key={i} className="group relative rounded-lg border overflow-hidden bg-muted/30">
            <img src={src} alt={`Captura ${i + 1}`} className="w-full aspect-video object-cover" />
            <div className="absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
              <a
                href={src}
                download={`TrackkSteelXR_capture_${i + 1}.png`}
                className="h-6 w-6 rounded bg-card/90 flex items-center justify-center"
              >
                <Download className="h-3 w-3 text-primary" />
              </a>
              <button
                onClick={() => removeScreenshot(i)}
                className="h-6 w-6 rounded bg-card/90 flex items-center justify-center"
              >
                <X className="h-3 w-3 text-destructive" />
              </button>
            </div>
            <div className="absolute bottom-1 left-1">
              <span className="font-mono text-[9px] bg-card/80 rounded px-1 py-0.5 text-muted-foreground">
                #{i + 1}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}