import {useState} from 'react'

import Tabs from '../../../components/mollecules/Tabs/Tabs'
import type {TabsType} from '../../../global/type'

import Cme from './cme'
import Futures from './futures'
import Options from './options'
import Prices from './prices'
import Spot from './spot'

const tabs: TabsType = [
  {
    Component: Spot,
    index: 1,
    label: 'Spot',
  },
  {
    Component: Cme,
    index: 2,
    label: 'CME',
  },
  {
    Component: Futures,
    index: 3,
    label: 'Futures',
  },
  {
    Component: Prices,
    index: 4,
    label: 'Prices',
  },
  {
    Component: Options,
    index: 5,
    label: 'Options',
  },
]

const Analytics: React.FC<{ index: number }> = ({ index }) => {
  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 Analytics
