'use client'
import { useRef } from 'react'
import cn from '@/utils/classnames'
import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
import TabSliderNew from '@/app/components/base/tab-slider-new'
import CorpusIndex from '@/app/components/skill/corpus'
import IntentIndex from '@/app/components/skill/intent'
import LogIndex from '@/app/components/skill/log'

const SkillIndex = () => {
  const containerRef = useRef<HTMLDivElement>(null)

  const [activeTab, setActiveTab] = useTabSearchParams({
    defaultTab: 'corpus',
  })
  const options = [
    { value: 'corpus', text: '训练语料' },
    { value: 'intent', text: '意图识别' },
    { value: 'log', text: '训练日志' },
  ]
  return (
    <>
      <div className='relative flex h-0 shrink-0 grow flex-col overflow-hidden'>
        <div
          ref={containerRef}
          className='relative flex flex-col overflow-y-auto bg-background-body'
        >
          <div className={cn('sticky top-0 z-20 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]')}>
            <TabSliderNew
              value={activeTab}
              onChange={(state) => {
                setActiveTab(state)
              }}
              options={options}
            />
          </div>
        </div>
        <div className="flex-1">
          {
            activeTab === 'corpus' && <CorpusIndex/>
          }
          {
            activeTab === 'intent' && <IntentIndex/>
          }
          {
            activeTab === 'log' && <LogIndex/>
          }
        </div>
      </div>
    </>
  )
}
SkillIndex.displayName = 'SkillIndex'
export default SkillIndex