import { Card, Steps } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

const ITEMS = [
  { title: '建立内容库', description: '首次启动自动建表并灌入种子' },
  { title: '调整分区与分组', description: '用 SQLite 工具直接改 node 表' },
  { title: '配置首页卡片', description: 'section_block 决定展示哪个节点' },
  { title: '发布', description: '条目 body 写 Markdown 即可' },
]

export function StepsSection() {
  return (
    <Section
      id="steps"
      title="步骤"
      api="Steps"
      desc="纵向流程：已完成打勾、当前项高亮、未开始置灰。适合发布流程、导入向导这类有顺序的任务。"
    >
      <Demo
        title="进行中"
        desc="current 从 0 开始；index < current 视为已完成。"
        layout="column"
        code={`<Steps items={items} current={1} />`}
      >
        <Card padding="lg">
          <Steps items={ITEMS} current={1} />
        </Card>
      </Demo>

      <Demo
        title="全部完成"
        desc="current 超出最后一项时，所有步骤都显示为已完成。"
        layout="column"
        code={`<Steps items={items} current={items.length} />`}
      >
        <Card padding="lg">
          <Steps items={ITEMS} current={ITEMS.length} />
        </Card>
      </Demo>

      <PropsTable
        rows={[
          { name: 'items', type: 'StepItem[]', required: true, desc: '{ title, description? }' },
          { name: 'current', type: 'number', required: true, desc: '当前步骤索引，从 0 开始' },
        ]}
      />
    </Section>
  )
}