import {useState} from 'react'

import {Tabs} from '../../components/mollecules'

import AccountSettings from './account/accountSettings'
import HealthChecks from './healthchecks/healthChecks'
import MoneyManagementSettings from './moneymanagement/moneyManagement'
import Theme from './theme'
import DefaultConfig from './defaultConfig/defaultConfig'
import UserInfoSettings from './UserInfoSettings'
import AccountFee from './accountFee/accountFee'

type TabsType = {
  label: string
  index: number
  Component: React.FC<{}>
}[]

// Tabs Array
const tabs: TabsType = [
  {
    Component: UserInfoSettings,
    index: 1,
    label: 'User Info',
  },
  {
    Component: MoneyManagementSettings,
    index: 2,
    label: 'Money Management',
  },
  {
    Component: AccountSettings,
    index: 3,
    label: 'Account Settings',
  },
  {
    Component: AccountFee,
    index: 4,
    label: 'Account Fee',
  },
  {
    Component: Theme,
    index: 5,
    label: 'Theme',
  },
  {
    Component: DefaultConfig,
    index: 6,
    label: 'Quick Start Config',
  },
  {
    Component: HealthChecks,
    index: 7,
    label: 'Health Checks',
  },
]

const Settings: React.FC = () => {
  const [selectedTab, setSelectedTab] = useState<number>(tabs[0].index)

  return (
    <div>
      <div className="container mx-auto">
        <Tabs selectedTab={selectedTab} onClick={setSelectedTab} tabs={tabs} />
      </div>
    </div>
  )
}

export default Settings
