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

const OPTIONS = [
  { value: 'grid', label: '网格', icon: <Icon name="grid_line" /> },
  { value: 'list', label: '列表', icon: <Icon name="menu_line" /> },
]

export function Segmenteds() {
  const [view, setView] = useState('grid')

  return (
    <Section
      id="segmented"
      title="分段"
      api="Segmented"
      desc="在几个视图之间切换（网格/列表、全部/收藏）。只切展示形态，不切内容分区——后者用 Tabs。"
    >
      <Demo
        title="基础用法"
        desc="选中项白底 + 轻阴影，容器浅灰底；选项可以带图标。"
        code={`const [view, setView] = useState('grid')

<Segmented options={OPTIONS} value={view} onChange={setView} />`}
      >
        <Segmented options={OPTIONS} value={view} onChange={setView} />
        <Text size="sm" tone="muted">
          当前：{view}
        </Text>
      </Demo>

      <Demo
        title="尺寸与占满整行"
        desc="sm 用于卡片内；block 让选项等分宽度（窄容器或移动端常用）。"
        layout="column"
        code={`<Segmented size="sm" options={OPTIONS} value={view} onChange={setView} />
<Segmented block options={OPTIONS} value={view} onChange={setView} />`}
      >
        <Segmented size="sm" options={OPTIONS} value={view} onChange={setView} />
        <Segmented block options={OPTIONS} value={view} onChange={setView} />
      </Demo>

      <PropsTable
        rows={[
          { name: 'options', type: 'SegmentedOption[]', required: true, desc: '{ value, label, icon? }' },
          { name: 'value', type: 'string', required: true, desc: '当前值' },
          { name: 'onChange', type: '(value: string) => void', required: true, desc: '切换回调' },
          { name: 'size', type: "'sm' | 'md'", defaultValue: "'md'", desc: '24 / 28px 高' },
          { name: 'block', type: 'boolean', defaultValue: 'false', desc: '占满一行，选项等分' },
        ]}
      />
    </Section>
  )
}