import React from "react";
import { Icon } from "@iconify/react";

interface ImageUploadProps {
  images: File[];
  onChange: (images: File[]) => void;
}

export const ImageUpload: React.FC<ImageUploadProps> = ({
  images,
  onChange,
}) => {
  const handleRemove = (index: number) => {
    onChange(images.filter((_, i) => i !== index));
  };

  const handleClearAll = () => {
    onChange([]);
  };

  if (images.length === 0) {
    return null;
  }

  return (
    <div className="image-preview-container" style={{ display: "block" }}>
      <div className="image-preview-header">
        <span>Загруженные изображения:</span>
        <button
          type="button"
          className="clear-images-btn"
          onClick={handleClearAll}
        >
          Очистить все
        </button>
      </div>
      <div className="image-preview-list">
        {images.map((image, index) => (
          <div key={index} className="image-preview-item">
            <img
              src={URL.createObjectURL(image)}
              alt={`Preview ${index + 1}`}
              className="image-preview-thumbnail"
            />
            <button
              className="image-preview-remove"
              onClick={() => handleRemove(index)}
              title="Удалить"
            >
              <Icon icon="mdi:close" />
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};
