"use client";

import { useState } from "react";

// Tabs
import WorkingDays from "./listMenu/workingDays";
import OfficeInformation from "./listMenu/officeInformation";
import GeneralInformation from "./listMenu/generalInformation";
import Step from "./Step";
import { defaultState } from "./defaultState";

function AddDoctorPage() {
  const [value, setValue] = useState(2);
  const [data, setData] = useState(defaultState);

  const resetData = () => {
    setData(defaultState);
    setValue(0);
  };

  const components = [
    <GeneralInformation
      data={data}
      parent="general"
      setData={setData}
      setValue={setValue}
    />,
    <OfficeInformation
      data={data}
      parent="office"
      setData={setData}
      setValue={setValue}
    />,
    <WorkingDays
      data={data}
      parent="work_day"
      setData={setData}
      resetData={resetData}
    />,
  ];

  return (
    <div className="opacity-page">
      <h1 className="text-[#525252] dark:text-[#D7D8ED] text-[20px] font-bold hidden md:flex">
        پروفایل من
      </h1>
      <div
        className="rounded-[8px] mt-0 md:mt-[24px] bg-transparent md:bg-[#FFF] 
        md:dark:bg-[#222433] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] dark:shadow-none pt-0 
        md:pt-[30px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]"
      >
        <Step value={value} />
        <div className="mt-[24px] md:mt-[28px] lg:mt-[32px]">
          {components[value]}
        </div>
      </div>
    </div>
  );
}

export default AddDoctorPage;