import CloseModalD from "@/components/icons/CloseModalD";
import { styleDefault } from "@/mui";
import { Box, Modal } from "@mui/material";
import Crop from "./Crop";

function ModalUpload({ open, handleClose, data, uploadImg }) {
  return (
    <Modal open={open} onClose={handleClose} className="!hidden md:!flex">
      <Box
        sx={styleDefault}
        className="!pt-[12px] md:!pt-[14px] lg:!py-[16px]
            dark:!bg-[#222433] dark:!shadow-none !px-[12px] sm:!px-[16px] md:!px-[20px] lg:!px-[24px]
            !pb-[12px] sm:!pb-[16px] lg:!pb-[20px] dark:!border-transparent"
      >
        <div className="flex items-center justify-between">
          <p className="text-[#3B3B3B] dark:text-[#DBDBDB] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
            برش عکس
          </p>
          <div className="cursor-pointer" onClick={handleClose}>
            <CloseModalD />
          </div>
        </div>
        <Crop data={data} uploadImg={uploadImg} handleClose={handleClose} />
      </Box>
    </Modal>
  );
}

export default ModalUpload;