import style from './index.module.scss'

const TabBar = ({
  activeIndex,
  goTo
}: {
  activeIndex: number
  goTo: (index: number) => void
}) => {
  return (
    <div className={style.tabBar}>
      <div className='tabBarBox'>
        <div className='tabItem' onClick={() => goTo(0)}>
          湖北古代文明
        </div>
        <div className='tabItem' onClick={() => goTo(1)}>
          湖北近代风云
        </div>
        <div className='tabItem' onClick={() => goTo(2)}>
          湖北现当代英杰
        </div>
      </div>
      <div className='underlineBox' style={{ transform: `translateX(${activeIndex * 111}%)` }}>
        <div
          className='underline'

        /></div>
    </div>
  )
}

export default TabBar
