import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA"
import CalendarA from "@/components/icons/CalendarA"
import ClockA from "@/components/icons/ClockA"
import LocationA from "@/components/icons/LocationA"
import TickCircleOrange from "@/components/icons/TickCircleOrange"
import { Button } from "@mui/material"

function Detail({ doctor, step, setStep }) {
    return (
        <div className="">
            <ul className="flex flex-col items-start justify-start gap-[24px]">
                <li className="flex items-center justify-start gap-[4px]">
                    <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
                        <LocationA />
                    </div>
                    <p className="text-[#616161] text-[14px] md:text-[16px] font-normal">آدرس: {doctor.location}</p>
                </li>
                <li className="flex items-center justify-between w-full">
                    <div className="flex items-center justify-start gap-[4px]">
                        <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
                            <CalendarA />
                        </div>
                        <div className="flex items-center justify-start">
                            <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تاریخ نوبت: </p>
                            <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">13 خرداد 1403</p>
                        </div>
                    </div>
                    {step < 5 && (
                        <Button
                            className="!p-1 !flex !items-center !justify-end !gap-[2px]"
                            onClick={() => setStep(0)}
                            variant="text"
                        >
                            <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
                            <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
                                <ArrowLeftOrangeA />
                            </div>
                        </Button>
                    )}
                </li>
                <li className="flex items-center justify-between w-full">
                    <div className="flex items-center justify-start gap-[4px]">
                        <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
                            <ClockA />
                        </div>
                        <div className="flex items-center justify-start">
                            <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">زمان نوبت: </p>
                            <p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">ساعت 17:20</p>
                        </div>
                    </div>
                    {step < 5 && (
                        <Button
                            className="!p-1 !flex !items-center !justify-end !gap-[2px]"
                            onClick={() => setStep(0)}
                            variant="text"
                        >
                            <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
                            <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
                                <ArrowLeftOrangeA />
                            </div>
                        </Button>
                    )}
                </li>
            </ul>
            <span
                className="mt-[10px] sm:mt-[16px] md:mt-[22px] lg:mt-[28px] 
                mb-[8px] sm:mb-[13px] md:mb-[19px] lg:mb-[24px] 
                w-full h-px bg-[#D7D7D7] block"
            ></span>
            <ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
                <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
                    <div
                        className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
                        w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
                    >
                        <TickCircleOrange />
                    </div>
                    <p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p>
                </li>
                <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
                    <div
                        className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
                        w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
                    >
                        <TickCircleOrange />
                    </div>
                    <p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p>
                </li>
            </ul>
        </div>
    )
}

export default Detail