'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