import Image from "next/image";
import RoundedButton from "@/components/elements/RoundedButton";
import Modal from "../elements/Modal";

interface ImageModalProps {
  isOpen: boolean;
  selectedImage: File | null;
  cancelImage: () => void;
  confirmImage: () => void;
}

const ImageModal = ({
  isOpen,
  selectedImage,
  cancelImage,
  confirmImage,
}: ImageModalProps) => {
  if (!isOpen || !selectedImage) return null;

  return (
    <Modal isOpen={isOpen} onClose={() => cancelImage()} height="700px">
      <div className="flex flex-col items-center ">
        <Image
          src={URL.createObjectURL(selectedImage)}
          alt="Selected"
          width={300}
          height={300}
          className="rounded-md h-[50vh] object-contain"
        />
        <div className="mt-4 flex gap-5">
          <RoundedButton
            onClick={confirmImage}
            className="text-green-500 border-green-500 p-2 rounded-2xl w-20"
          >
            ارسال
          </RoundedButton>
          <RoundedButton
            onClick={cancelImage}
            className="text-red-500 border-red-500 p-2 rounded-2xl w-20"
          >
            لغو
          </RoundedButton>
        </div>
      </div>
    </Modal>
  );
};

export default ImageModal;
