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

export function Typographies() {
  return (
    <Section
      id="typography"
      title="排版"
      api="Title / Text / Paragraph"
      desc="把字号、字重、文字层级收进三个组件；页面不再各写 font-size。字号阶梯来自参考站实测：13 / 14 / 16 / 18 / 24，正文（Paragraph）默认 16/24。"
    >
      <Demo
        title="标题层级"
        desc="level 决定字号并输出对应的 h1–h4；要换语义标签时传 as。组件不带外边距，间距交给 Space。"
        layout="column"
        code={`<Title level={1}>页面标题</Title>
<Title level={2}>区块标题</Title>
<Title level={3}>卡片标题</Title>
<Title level={4}>小节标题</Title>`}
      >
        <Title level={1}>页面标题 24/32</Title>
        <Title level={2}>区块标题 18/26</Title>
        <Title level={3}>卡片标题 16/24</Title>
        <Title level={4}>小节标题 14/22</Title>
      </Demo>

      <Demo
        title="文字层级与尺寸"
        desc="tone 控制颜色层级（main → secondary → sub → muted），size 控制字号；strong 是主题的 500 字重，truncate 做单行省略。"
        layout="column"
        code={`<Text tone="main">主文字</Text>
<Text tone="secondary">次级文字</Text>
<Text tone="sub">说明文字</Text>
<Text tone="muted">占位文字</Text>

<Text size="xs">12</Text>
<Text size="sm">13</Text>
<Text size="md">14</Text>
<Text size="base">16</Text>
<Text size="lg">18</Text>`}
      >
        <Space direction="column" gap="sm" align="start">
          <Text tone="main">主文字：标题、正文重点</Text>
          <Text tone="secondary">次级文字：默认段落</Text>
          <Text tone="sub">说明文字：摘要、描述</Text>
          <Text tone="muted">占位文字：时间、元信息</Text>
        </Space>

        <Space gap="lg" wrap>
          <Text size="xs">12 角标</Text>
          <Text size="sm">13 标签</Text>
          <Text size="md">14 控件</Text>
          <Text size="base">16 正文</Text>
          <Text size="lg">18 标题</Text>
        </Space>

        <Space gap="lg" wrap>
          <Text strong>500 加粗</Text>
          <Text truncate style={{ maxWidth: 180 }}>
            单行截断：这一行文字太长时会在末尾显示省略号，不会换行
          </Text>
        </Space>
      </Demo>

      <Demo
        title="段落与行数截断"
        desc="文章摘要常用 2–3 行截断；lines 用 -webkit-line-clamp 实现，不破坏文本可选中。"
        layout="column"
        code={`<Paragraph>正文段落，默认 16/24、次级颜色。</Paragraph>
<Paragraph lines={2}>两行后省略……</Paragraph>`}
      >
        <Paragraph>
          组件只负责排版：字号、行高、颜色都来自令牌。段落之间不要用 <code>margin</code>，
          放进 <code>Space</code> 里控制间距，这样换页面时节奏是一致的。
        </Paragraph>
        <Paragraph lines={2}>
          这一段的文字比较长，用来演示两行截断：用 -webkit-line-clamp 做视觉截断，
          文本本身仍然完整保留在 DOM 里，复制、搜索、屏幕阅读器都能拿到全文，只是超出两行后不再显示。
        </Paragraph>
      </Demo>

      <Demo
        title="字重"
        desc="库内置 400 / 500 / 600 / 700 四档；默认 500，参考站的标题是 600，用 weight='semibold'。"
        layout="column"
        code={`<Title level={3} weight="medium">默认 500</Title>
<Title level={3} weight="semibold">600（参考站标题）</Title>
<Title level={3} weight="strong">700（强调）</Title>`}
      >
        <Title level={3} weight="medium">
          默认 500
        </Title>
        <Title level={3} weight="semibold">
          600（参考站标题）
        </Title>
        <Title level={3} weight="strong">
          700（强调）
        </Title>
      </Demo>

      <PropsTable
        rows={[
          { name: 'level', type: '1 | 2 | 3 | 4', defaultValue: '2', desc: '字号档位，默认输出 h1–h4' },
          { name: 'as', type: "'h1' | 'h2' | 'h3' | 'h4' | 'div'", desc: '换语义标签' },
          { name: '…rest', type: 'HTMLAttributes', desc: '透传原生属性' },
        ]}
      />

      <PropsTable
        rows={[
          { name: 'tone', type: "'main' | 'secondary' | 'sub' | 'muted'", defaultValue: "'main'", desc: '文字层级' },
          { name: 'size', type: "'xs' | 'sm' | 'md' | 'base' | 'lg'", defaultValue: "'md'", desc: '12 / 13 / 14 / 16 / 18' },
          { name: 'strong', type: 'boolean', defaultValue: 'false', desc: '500 字重' },
          { name: 'truncate', type: 'boolean', defaultValue: 'false', desc: '单行省略' },
          { name: 'as', type: "'span' | 'p' | 'div'", defaultValue: "'span'", desc: '语义标签' },
        ]}
      />

      <PropsTable
        rows={[
          { name: 'tone', type: "'main' | 'secondary' | 'sub'", defaultValue: "'sub'", desc: '文字层级' },
          { name: 'lines', type: 'number', desc: '最多显示几行，超出省略' },
        ]}
      />
    </Section>
  )
}