import MediaGallery from "@/components/CommonUi/MediaUploader/MediaGallery";
import { MdOutlineRemoveCircleOutline } from "react-icons/md";

export default function ImageUploader({
  isMultiple,
  images,
  setImages,
  maxCount,
}) {
  const handleRemoveImage = (img) => {
    const newImages = images.filter((image) => image.id !== img.id);
    setImages(newImages);
  };

  const onInsert = (selectedImage) => {
    setImages(selectedImage);
  };

  return (
    <>
      <div>
        <div className='flex flex-wrap gap-2'>
          {images.map((img) => {
            return (
              <div key={img.id} className='relative'>
                <img
                  src={`${import.meta.env.VITE_APP_API}/media/view/${img.id}`}
                  alt={img.fileName}
                  className='w-24 h-24 object-cover rounded'
                />
                <div className='absolute top-0 right-0'>
                  <button
                    onClick={() => handleRemoveImage(img)}
                    className='text-red-500 p-1 rounded-full'
                  >
                    <MdOutlineRemoveCircleOutline size={20} />
                  </button>
                </div>
              </div>
            );
          })}

          <MediaGallery
            isMultiple={isMultiple}
            onInsert={onInsert}
            maxCount={maxCount}
          />
        </div>
      </div>
    </>
  );
}
