import { Button } from "@/components/ui/button"
import { X } from "lucide-react"

interface EditorImagesProps {
  images: string[]
  onRemove: (index: number) => void
}

export function EditorImages({ images, onRemove }: EditorImagesProps) {
  if (!images || images.length === 0) return null

  return (
    <div className="flex flex-col gap-3 mb-4">
      {images.map((img, idx) => (
        <div key={idx} className="relative group">
          <img 
            src={img} 
            alt="" 
            className="h-auto rounded-lg"
          />
          <Button
            variant="ghost"
            size="sm"
            className="absolute top-2 right-2 h-7 w-7 p-0 bg-white/90 hover:bg-white opacity-0 group-hover:opacity-100 transition-opacity"
            onClick={() => onRemove(idx)}
          >
            <X className="h-4 w-4" />
          </Button>
        </div>
      ))}
    </div>
  )
}