'use client';
import { useState } from 'react';

import Tabs from "./Tabs";
import About from './components/about';
import Contact from './components/contact';
import Doctors from './components/doctors';


function ClinicPage({ data, doctors }) {

  const [value, setValue] = useState(1);
  const handleChange = (event, newValue) => setValue(newValue);

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

  return (
    <div className="pt-[136px] mt-[40px] padding-responsive">
      <Tabs
        value={value}
        handleChange={handleChange}
      />
      <div className='mt-[32px]'>
        {Components[value]}
      </div>
    </div>
  )
}

export default ClinicPage