'use client';

import { useEffect, useState } from "react";
import AppointmentList from "./appointmentList"
import DetailDoctor from "./detailDoctor"
import Share from "./detailDoctor/Share";
import CustomLoading from "@/app/component/loading/Custom";

function DoctorPage({ doctor }) {

    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 2000);
    }, []);

    return (
        <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
            <div className="flex items-center justify-between">
                <CustomLoading loading={loading} width={180} height={25}>
                    <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
                        <p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
                        <p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
                    </div>
                </CustomLoading>
                <div className="flex lg:hidden">
                    <Share />
                </div>
            </div>
            <div className="flex items-start justify-center gap-6 mt-[30px]">
                <DetailDoctor doctor={doctor} loading={loading} />
                <AppointmentList doctor={doctor} loading={loading} />
            </div>
        </div>
    )
}

export default DoctorPage;