'use client';

import { useState } from "react";

// Tabs
import TabsHead from "./tabsHead";
import Turns from "./tabsHead/turns";
import SpecialDays from "./tabsHead/specialDays";
import WorkingDays from "./tabsHead/workingDays";
import OfficeInformation from "./tabsHead/officeInformation";
import GeneralInformation from "./tabsHead/generalInformation";

function AddDoctorPage() {

    const [value, setValue] = useState(0);

    const handleChange = (event, newValue) => setValue(newValue);

    const components = [
        <GeneralInformation />,
        <OfficeInformation />,
        <Turns />,
        <WorkingDays />,
        <SpecialDays />
    ];

    return (
        <div className="opacity-page">
            <p className="text-[#525252] text-[20px] font-bold">پروفایل من</p>
            <div className="rounded-[8px] mt-[24px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-[12px] pb-[24px] px-[56px]">
                <TabsHead
                    value={value}
                    handleChange={handleChange}
                />
                <div className={`mt-[24px] ${value !== 4 ? 'mx-[56px]' : 'mx-0'}`}>
                    {components[value]}
                </div>
            </div>
        </div>
    )
}

export default AddDoctorPage