import React, {useEffect, useState} from 'react'

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

import Analytics from './analytics/analytics'
import Monitoring from './monitoring'
import BestAgents from './analytics/bestAgents'
import AgentSearch from './agentSearch'
import AgentIndex from './agentIndex'
import AgentStrategy from './agentStrategy'
import PlatformSummary from './platformSummary'

const tabs: ITabsType = [
  {
    Component: Monitoring,
    index: 1,
    label: 'Monitoring',
  },
  {
    Component: Analytics,
    index: 2,
    label: 'Analytics',
  },
  {
    Component: BestAgents,
    index: 3,
    label: 'Best Agents',
  },
  {
    Component: AgentSearch,
    index: 4,
    label: 'Agent Search',
  },
  {
    Component: AgentIndex,
    index: 5,
    label: 'Agent Index',
  },
  {
    Component: AgentStrategy,
    index: 6,
    label: 'Agent Strategy',
  },
  {
    Component: PlatformSummary,
    index: 7,
    label: 'Platform Summary',
  },
]

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

  useEffect(() => {}, [])

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