import { Box, Modal } from "@mui/material";
import { styleDefault } from "@/mui";
import DatePicker from "@/app/component/date/datePicker";
import CloseModalD from "@/components/icons/CloseModalD";
import DateTime from "@/app/component/date/dateTime";

function ModalDatePicker({ open, handleClose }) {
  return (
    <Modal open={open} onClose={handleClose}>
      <Box sx={styleDefault} className="!py-[24px] !px-[40px]">
        <div className="flex justify-between items-center">
          <span></span>
          <p className="text-[#3B3B3B] text-[20px] font-medium">
            دریافت نوبت از دکتر مهران امینی
          </p>
          <div className="cursor-pointer" onClick={handleClose}>
            <CloseModalD />
          </div>
        </div>
        <div className="flex flex-col items-start justify-start gap-[16px] mt-[24px]">
          <p className="text-[#3B3B3B] text-[20px] font-bold">انتخاب روز</p>
          <div className="py-[24px] px-[32px] border border-solid border-[#E9ECEF] rounded-[16px] bg-[#FFF] flex items-center">
            <DatePicker />
            <DatePicker />
          </div>
        </div>
        <div className="mt-[24px]">
          <p className="text-[#3B3B3B] text-[20px] font-bold">انتخاب ساعت</p>
          <DateTime />
        </div>
      </Box>
    </Modal>
  );
}

export default ModalDatePicker;