import { Trash } from 'iconsax-react';
import { FC } from 'react';

type Props = {
    setSelectedImage: (file: any) => any,
    selectedImage: any
}

export const ImageUpload: FC<Props> = ({ selectedImage, setSelectedImage }) => {
    const handleImageChange = (event: any) => {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = () => {
                setSelectedImage(file);
            };
            reader.readAsDataURL(file);
        }
    };

    const handleImageDelete = () => {
        setSelectedImage(null);
    };

    return (
        <div className="flex flex-col items-left">
            <input
                type="file"
                accept="image/*"
                onChange={handleImageChange}
                className="hidden"
                id="imageUpload"
            />
            <label htmlFor="imageUpload" className="cursor-pointer">
                {selectedImage ? (
                    <div className="relative">
                        <img src={URL.createObjectURL(selectedImage)} alt="Selected image" className="w-full min-w-max max-h-60 object-fill rounded-[40px]" />
                        <Trash color='#fff' size={25} onClick={handleImageDelete} className='absolute bottom-2 right-4' />
                    </div>
                ) : (
                    <div className="bg-white w-full min-w-max h-fit min-h-60 flex items-center justify-center text-secondary-text-color rounded-[40px]">
                        عکس خود را انتخاب کنید
                    </div>
                )}
            </label>
        </div>
    );
}