import React, {useState} from 'react'

import 'react-toastify/dist/ReactToastify.css'
import {Tabs} from '../../components/mollecules'
import BacktestScanner from './backtestScanner'
import BacktestGeneticBundle from './backtestGeneticBundle'
import type {TabsType} from '../../global/type.tsx'
import BacktestBundleForm from './backtestBundleForm'

// Tabs Array
const tabs: TabsType = [
  {
    Component: BacktestBundleForm,
    index: 0,
    label: 'Bundle',
  },
  {
    Component: BacktestScanner,
    index: 1,
    label: 'Scanner',
  },
  {
    Component: BacktestGeneticBundle,
    index: 2,
    label: 'GeneticBundle',
  },
]

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

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

export default Backtest
