import React from "react";
import { Trash2Icon, ImageIcon, FileIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

interface FilePreviewProps {
  urls: string[];
  onDestroy?: (url: string) => void;
}

export default function FilePreview({ urls, onDestroy }: FilePreviewProps) {
  if (!urls || urls.length === 0) return null;
  return (
    <div className="flex flex-col gap-2 mt-2">
      <h4 className="text-sm font-semibold mb-1">Archivos subidos</h4>
      <ul className="text-xs break-all space-y-2">
        {urls.map((url, i) => {
          const isImage = /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(url);
          const isVideo = /\.(mp4|webm|ogg|mov|avi)$/i.test(url);
          const isAudio = /\.(mp3|wav|ogg|aac)$/i.test(url);
          return (
            <li key={i} className="flex items-center gap-3 bg-background rounded-lg border p-2">
              <div className="flex items-center gap-2">
                {isImage ? (
                  <img src={url} alt="preview" className="w-10 h-10 object-cover rounded border" />
                ) : isVideo ? (
                  <video src={url} className="w-10 h-10 object-cover rounded border" controls />
                ) : isAudio ? (
                  <audio src={url} controls className="w-10 h-10" />
                ) : (
                  <FileIcon className="size-6 opacity-60" />
                )}
              </div>
              <a href={url} target="_blank" rel="noopener noreferrer" className="truncate underline flex-1">{url}</a>
              {onDestroy && (
                <Button size="icon" variant="ghost" type="button" className="text-muted-foreground/80 hover:text-foreground" onClick={() => onDestroy(url)} aria-label="Eliminar archivo">
                  <Trash2Icon className="size-4" aria-hidden="true" />
                </Button>
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}