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

export function Skeletons() {
  return (
    <Section
      id="skeleton"
      title="骨架屏"
      api="Skeleton"
      desc="内容加载前的占位。形状要和真实内容一致，否则加载完成后会跳动；整块区域用 aria-busy 标记，骨架本身对屏幕阅读器隐藏。"
    >
      <Demo
        title="三种形状"
        desc="text 是文本行（最后一行自动收短），rect 是封面/图片，circle 是头像。"
        layout="column"
        code={`<Skeleton variant="text" lines={3} />
<Skeleton variant="rect" height={120} />
<Skeleton variant="circle" width={48} height={48} />`}
      >
        <Space gap="lg" wrap>
          <div style={{ width: 240 }}>
            <Skeleton variant="text" lines={3} />
          </div>
          <Skeleton variant="rect" width={200} height={120} />
          <Skeleton variant="circle" width={48} height={48} />
        </Space>
      </Demo>

      <Demo
        title="卡片骨架"
        desc="按真实卡片的结构拼：头像 + 两行标题 + 封面 + 两行摘要。加载完成后把整块换成真实内容即可。"
        layout="column"
        code={`<Card aria-busy="true">
  <Space gap="sm">
    <Skeleton variant="circle" width={36} height={36} />
    <div style={{ flex: 1 }}>
      <Skeleton lines={2} />
    </div>
  </Space>
  <Skeleton variant="rect" height={160} style={{ marginTop: 16 }} />
  <Skeleton lines={2} style={{ marginTop: 16 }} />
</Card>`}
      >
        <Space direction="column" gap="md" align="stretch">
          <Card padding="lg" aria-busy="true">
            <Space gap="sm">
              <Skeleton variant="circle" width={36} height={36} />
              <div style={{ flex: 1 }}>
                <Skeleton lines={2} />
              </div>
            </Space>
            <div style={{ marginTop: 'var(--su-space-4)' }}>
              <Skeleton variant="rect" height={160} />
            </div>
            <div style={{ marginTop: 'var(--su-space-4)' }}>
              <Skeleton lines={2} />
            </div>
          </Card>
        </Space>
      </Demo>

      <PropsTable
        rows={[
          { name: 'variant', type: "'text' | 'rect' | 'circle'", defaultValue: "'text'", desc: '形状' },
          { name: 'lines', type: 'number', defaultValue: '1', desc: '仅 text：行数' },
          { name: 'width', type: 'number | string', desc: '宽度；rect 默认 100%，circle 默认 40' },
          { name: 'height', type: 'number | string', desc: '高度；rect 默认 120' },
        ]}
      />
    </Section>
  )
}