import {React, Suspense} from 'react';
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import Loading from './Loading';

import InformationTab from './tabs/InformationTab';
import CommonSettingsTab from './tabs/CommonSettingsTab';
import TimeslotSettingsTab from './tabs/TimeslotSettingsTab';
import CategoriesTab from './tabs/CategoriesTab';
import HolidaysAndWeekendsTab from './tabs/HolidaysAndWeekendsTab';
import OtherSettingsTab from './tabs/OtherSettingsTab';
import NewsletterTab from './tabs/NewsletterTab';
import FAQTab from './tabs/FAQTab';
import SupportTab from './tabs/SupportTab';



const tabs = [
  { title: 'Information', content: InformationTab },
  { title: 'Settings', content: CommonSettingsTab },
  { title: 'Timeslot Settings', content: TimeslotSettingsTab },
  { title: 'Categories', content: CategoriesTab },
  { title: 'Holidays and weekends', content: HolidaysAndWeekendsTab },
  { title: 'Other Settings', content: OtherSettingsTab },
  { title: 'Newsletter', content: NewsletterTab },
  { title: 'FAQ', content: FAQTab },
  { title: 'Support', content: SupportTab },
];

const Settings = () => {
  return (
    <Tabs>
      <div className="dreamfox-tab-left">
        <div className="dreamfox-tab-left__box">
          <TabList>
            {tabs.map(tab => <Tab key={tab.title}>{tab.title}</Tab>)}
          </TabList>
        </div>
      </div>
      <div className="dreamfox-tab-right">
        <div className="dreamfox-tab-right__box">
          {tabs.map(tab =>
            <TabPanel key={tab.title}>
              <Suspense fallback={<Loading message={'Loading...'} />}>
                <tab.content />
              </Suspense>
            </TabPanel>
          )}
        </div>
      </div>
  </Tabs>
  )
}

export default Settings
