"use client";

import { useEffect, useState } from "react";

import About from "./components/about";
import Contact from "./components/contact";
import Doctors from "./components/doctors";
import Tabs from "@/app/component/Tabs";

const listTab = ["درباره کلینیک", "اطلاعات تماس", "پزشک ها"];

function ClinicPage({ data, doctors }) {
  const [value, setValue] = useState(0);
  const [loading, setLoading] = useState(true);
  const handleChange = (event, newValue) => setValue(newValue);

  const Components = [
    <About data={data} loading={loading} />,
    <Contact data={data} loading={loading} />,
    <Doctors doctors={doctors} loading={loading} />,
  ];

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

  return (
    <div className="pt-[40px] sm:pt-[70px] md:pt-[100px] lg:pt-[136px] mt-[40px] padding-responsive">
      <Tabs
        style={{
          ".MuiTabs-indicator": {
            height: "2px",
            borderRadius: "10px",
            background: "#F17732",
          },
          "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
            color: "#F17732 !important",
          },
          "& .MuiButtonBase-root.Mui-selected": {
            color: "#F17732 !important",
          },
        }}
        value={value}
        listTab={listTab}
        handleChange={handleChange}
      />
      <div className="mt-[24px] sm:mt-[27px] md:mt-[30px] lg:mt-[32px]">
        {Components[value]}
      </div>
    </div>
  );
}

export default ClinicPage;