import Image from "next/image";
import { toast } from "sonner";

type ProductUploadModalProps = {
    show: boolean;
    uploading: boolean;
    onClose: () => void;
    onImageUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

export default function ProductUploadModal({
                                               show,
                                               uploading,
                                               onClose,
                                               onImageUpload,
                                           }: ProductUploadModalProps) {
    if (!show) return null;

    return (
        <div
            onClick={onClose}
            className="fixed inset-0 bg-black/60 z-50 flex items-end justify-center"
        >
            <div
                onClick={(e) => e.stopPropagation()}
                className="bg-white rounded-t-3xl p-4 w-full max-w-md shadow-2xl animate-slide-up"
            >
                <div className="flex flex-col gap-3">
                    <label
                        htmlFor="fileInput"
                        className="flex items-center border-[#DDDDDD] justify-between border rounded-[12px] px-4 py-3 hover:bg-pink-50 transition cursor-pointer"
                    >
                        <span className="text-gray-700 font-medium">تحميل الصور</span>
                        <Image
                            src="/icons/upload-img.svg"
                            alt="upload"
                            width={24}
                            height={24}
                        />
                    </label>

                    <input
                        id="fileInput"
                        type="file"
                        multiple
                        accept="image/*"
                        className="hidden"
                        onChange={onImageUpload}
                        disabled={uploading}
                    />

                    <button
                        onClick={() => toast.info("سيتم ربطه لاحقًا مع Google Photos")}
                        className="flex items-center border-[#DDDDDD] justify-between border rounded-[12px] px-4 py-3 hover:bg-gray-50 transition"
                    >
                        <span className="text-gray-700 font-medium">جوجل صور</span>
                        <Image
                            src="/icons/google-photos.svg"
                            alt="google photos"
                            width={24}
                            height={24}
                        />
                    </button>
                </div>
            </div>
        </div>
    );
}