import { Progress, Space, Text } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

export function Progresses() {
  return (
    <Section
      id="progress"
      title="进度"
      api="Progress"
      desc="纯展示的进度条：任务进度、存储占用、导入比例。百分比由调用方给，组件只负责夹在 0–100 之间。"
    >
      <Demo
        title="颜色与尺寸"
        desc="tone 表达语义：主色（进行中）、成功（完成）、警示、危险（超限）。sm 4px 用于行内，md 8px 用于卡片。"
        layout="column"
        code={`<Progress percent={32} />
<Progress percent={64} tone="success" />
<Progress percent={88} tone="warning" size="sm" />`}
      >
        <Progress percent={32} />
        <Progress percent={64} tone="success" />
        <Progress percent={88} tone="warning" size="sm" />
        <Progress percent={100} tone="danger" />
      </Demo>

      <Demo
        title="带百分比文案"
        desc="showLabel 在右侧补百分比；行内场景可以和说明文字用 Space 排成一行。"
        layout="column"
        code={`<Progress percent={72} showLabel />
<Space gap="sm" style={{ width: '100%' }}>
  <Text size="sm" tone="sub">存储占用</Text>
  <Progress percent={45} size="sm" />
</Space>`}
      >
        <Progress percent={72} showLabel />
        <Space gap="sm">
          <Text size="sm" tone="sub">
            存储占用
          </Text>
          <Progress percent={45} size="sm" />
        </Space>
      </Demo>

      <PropsTable
        rows={[
          { name: 'percent', type: 'number', required: true, desc: '0–100，超出会被夹住' },
          { name: 'size', type: "'sm' | 'md'", defaultValue: "'md'", desc: '4 / 8px' },
          { name: 'tone', type: "'primary' | 'success' | 'warning' | 'danger'", defaultValue: "'primary'", desc: '语义配色' },
          { name: 'showLabel', type: 'boolean', defaultValue: 'false', desc: '右侧显示百分比' },
        ]}
      />
    </Section>
  )
}