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