import React from 'react'
import { cn } from '../lib/utils'
import { X } from 'lucide-react'

interface ImageGalleryWithDeleteProps {
  images: { uri?: string }[]
  onRemove: (uri: string) => void
  className?: string
}

export function ImageGalleryWithDelete({
  images,
  onRemove,
  className,
}: ImageGalleryWithDeleteProps) {
  return (
    <div className={cn('grid grid-cols-3 gap-2', className)}>
      {images.map((image, index) => (
        <div key={index} className="relative aspect-square overflow-hidden rounded-lg">
          <img
            src={image.uri}
            alt={`Gallery ${index + 1}`}
            className="h-full w-full object-cover"
          />
          <button
            onClick={() => image.uri && onRemove(image.uri)}
            className="absolute right-1 top-1 rounded-full bg-red-500 p-1 text-white hover:bg-red-600"
          >
            <X className="h-3 w-3" />
          </button>
        </div>
      ))}
    </div>
  )
}
