import { Image, Eye, Trash2, Download } from 'lucide-react';

interface CoverData {
  id: string;
  filename: string;
  url: string;
  createdAt: string;
}

interface CoverGalleryProps {
  covers: CoverData[];
  onSelect: (coverUrl: string) => void;
  onDelete: (coverId: string) => void;
}

export default function CoverGallery({ covers, onSelect, onDelete }: CoverGalleryProps) {
  if (covers.length === 0) {
    return (
      <div className="card text-center py-12">
        <Image className="w-16 h-16 text-gray-300 mx-auto mb-4" />
        <h3 className="text-lg font-medium text-gray-900">No covers yet</h3>
        <p className="text-gray-500 mt-2">
          Upload a cover image or generate one with AI to get started
        </p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {covers.map((cover) => (
        <div
          key={cover.id}
          className="card p-0 overflow-hidden group hover:shadow-lg transition-shadow"
        >
          <div className="aspect-[2/3] relative bg-gray-100">
            <img
              src={cover.url}
              alt={cover.filename}
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
              <button
                onClick={() => onSelect(cover.url)}
                className="p-2 bg-white rounded-lg hover:bg-gray-100 transition-colors"
                title="Edit"
              >
                <Eye className="w-5 h-5 text-gray-700" />
              </button>
              <button
                onClick={() => {
                  const link = document.createElement('a');
                  link.href = cover.url;
                  link.download = cover.filename;
                  link.click();
                }}
                className="p-2 bg-white rounded-lg hover:bg-gray-100 transition-colors"
                title="Download"
              >
                <Download className="w-5 h-5 text-gray-700" />
              </button>
              <button
                onClick={() => onDelete(cover.id)}
                className="p-2 bg-red-500 rounded-lg hover:bg-red-600 transition-colors"
                title="Delete"
              >
                <Trash2 className="w-5 h-5 text-white" />
              </button>
            </div>
          </div>
          <div className="p-3">
            <p className="text-sm font-medium text-gray-900 truncate">
              {cover.filename}
            </p>
            <p className="text-xs text-gray-500 mt-1">
              {new Date(cover.createdAt).toLocaleDateString()}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}