import { useState } from 'react'
import { Text, Tabs } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

const ITEMS = [
  { key: 'detail', label: '详情' },
  { key: 'comments', label: '评论 6' },
  { key: 'history', label: '历史（暂不可用）', disabled: true },
]

export function TabsSection() {
  const [tab, setTab] = useState('detail')
  const [pillTab, setPillTab] = useState('all')

  return (
    <Section
      id="tabs"
      title="标签页"
      api="Tabs"
      desc="在几块内容之间切换。只负责标签栏，面板由页面渲染；键盘 ← → 移动、Home/End 跳首尾。"
    >
      <Demo
        title="下划线（默认）"
        desc="适合详情页、设置页这类页面级分区；选中项用 2px 主色下划线标记。"
        layout="column"
        code={`const [tab, setTab] = useState('detail')

<Tabs items={ITEMS} activeKey={tab} onChange={setTab} />
<div role="tabpanel" style={{ paddingTop: 12 }}>{tab} 面板</div>`}
      >
        <Tabs items={ITEMS} activeKey={tab} onChange={setTab} />
        <Text size="sm" tone="muted">
          当前面板：{tab}
        </Text>
      </Demo>

      <Demo
        title="胶囊"
        desc="pill 变体放在浅底容器里，适合卡片内的次级切换。"
        layout="column"
        code={`<Tabs variant="pill" items={items} activeKey={pillTab} onChange={setPillTab} />`}
      >
        <Tabs
          variant="pill"
          items={[
            { key: 'all', label: '全部' },
            { key: 'published', label: '已发布' },
            { key: 'draft', label: '草稿' },
          ]}
          activeKey={pillTab}
          onChange={setPillTab}
        />
      </Demo>

      <PropsTable
        rows={[
          { name: 'items', type: 'TabItem[]', required: true, desc: '{ key, label, disabled? }' },
          { name: 'activeKey', type: 'string', required: true, desc: '当前标签' },
          { name: 'onChange', type: '(key: string) => void', required: true, desc: '切换回调' },
          { name: 'variant', type: "'line' | 'pill'", defaultValue: "'line'", desc: '下划线 / 胶囊' },
        ]}
      />
    </Section>
  )
}