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

export function Spinners() {
  const [loading, setLoading] = useState(false)

  return (
    <Section
      id="spinner"
      title="加载中"
      api="Spinner"
      desc="整块区域或行内的加载指示。按钮内部的 loading 由 Button 自己处理，文字占位用 Skeleton——三者分工不同。"
    >
      <Demo
        title="尺寸"
        desc="sm 14px 用于行内（跟着文字基线走），md 20px 用于区块。"
        code={`<Spinner size="sm" />
<Spinner size="md" />`}
      >
        <Space gap="lg">
          <Spinner size="sm" />
          <Spinner size="md" />
        </Space>
      </Demo>

      <Demo
        title="行内状态"
        desc="和一句说明放在一起时，用 Space 排；Spinner 自带 role=status，读屏会读出 label。"
        layout="column"
        code={`<Space gap="sm">
  <Spinner size="sm" label="正在同步" />
  <Text size="sm" tone="sub">正在同步内容库…</Text>
</Space>`}
      >
        <Space gap="sm">
          <Spinner size="sm" label="正在同步" />
          <Text size="sm" tone="sub">
            正在同步内容库…
          </Text>
        </Space>
      </Demo>

      <Demo
        title="整块加载"
        desc="区域级加载时给出一个居中的 Spinner + 文案；按钮里的 loading 不要用 Spinner 代替。"
        layout="column"
        code={`{loading && (
  <Space direction="column" gap="sm" justify="center">
    <Spinner />
    <Text size="sm" tone="muted">正在读取…</Text>
  </Space>
)}`}
      >
        <Space direction="column" gap="sm" align="center">
          <Button size="sm" variant="secondary" loading={loading} onClick={() => {
            setLoading(true)
            window.setTimeout(() => setLoading(false), 1200)
          }}>
            模拟加载
          </Button>
          <Space gap="sm">
            <Spinner />
            <Text size="sm" tone="muted">
              {loading ? '正在读取…' : '待命中'}
            </Text>
          </Space>
        </Space>
      </Demo>

      <PropsTable
        rows={[
          { name: 'size', type: "'sm' | 'md'", defaultValue: "'md'", desc: '14 / 20px' },
          { name: 'label', type: 'string', defaultValue: "'加载中'", desc: '无障碍名称' },
        ]}
      />
    </Section>
  )
}