import { Badge, Card, Icon, IconButton, Space } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

export function Cards() {
  return (
    <Section
      id="cards"
      title="卡片"
      api="Card"
      desc="白色容器 + 1px 细边 + 极轻阴影，是页面里的基本承载单位。Card 只负责容器，标题栏、角标、操作区由使用方组合。"
    >
      <Demo
        title="基础用法"
        desc="默认 md 内边距（20px）。放在白底页面上时，靠 1px 描边而不是阴影区分边界，和主题一致。"
        muted
        layout="column"
        code={`<Card>
  <p>卡片内容</p>
</Card>`}
      >
        <Card>
          <Space direction="column" gap="sm" align="start">
            <strong style={{ fontWeight: 500 }}>常用推荐</strong>
            <span style={{ color: 'var(--su-text-muted)' }}>
              卡片是最小布局单元，内容完全由使用方决定。
            </span>
          </Space>
        </Card>
      </Demo>

      <Demo
        title="内边距"
        desc="padding=none 用于封面贴边的卡片；sm 用于紧凑列表；lg 用于详情页大块内容。"
        code={`<Card padding="none">…</Card>
<Card padding="sm">…</Card>
<Card padding="lg">…</Card>`}
      >
        <Card padding="sm">
          <span style={{ color: 'var(--su-text-muted)' }}>sm · 12px</span>
        </Card>
        <Card padding="md">
          <span style={{ color: 'var(--su-text-muted)' }}>md · 20px</span>
        </Card>
        <Card padding="lg">
          <span style={{ color: 'var(--su-text-muted)' }}>lg · 24px</span>
        </Card>
      </Demo>

      <Demo
        title="可点击卡片"
        desc="hoverable 只加深阴影，不改变尺寸，避免列表在悬停时抖动。"
        code={`<Card hoverable>整张卡片可点击</Card>`}
      >
        <Card hoverable padding="sm">
          <span style={{ color: 'var(--su-text-muted)' }}>把鼠标放上来</span>
        </Card>
      </Demo>

      <Demo
        title="组合出标题栏"
        desc="卡片本身不带标题栏；色条 + 标题 + 角标 + 更多按钮是一组可复用的「分区头部」，这里用基础组件拼出来。"
        muted
        layout="column"
        code={`<Card>
  <Space justify="between">
    <Space gap="md">
      <span style={{ width: 4, height: 16, background: 'var(--su-color-primary)' }} />
      <strong>常用站点</strong>
      <Badge count={18} />
    </Space>
    <IconButton label="查看全部" icon={<Icon name="more_3_line" />} />
  </Space>
  …
</Card>`}
      >
        <Card>
          <Space justify="between">
            <Space gap="md">
              <span
                style={{
                  width: 4,
                  height: 16,
                  borderRadius: 2,
                  backgroundColor: 'var(--su-color-primary)',
                }}
              />
              <strong style={{ fontWeight: 500 }}>常用站点</strong>
              <Badge count={18} />
            </Space>
            <IconButton label="查看全部" icon={<Icon name="more_3_line" />} />
          </Space>
        </Card>
      </Demo>

      <PropsTable
        rows={[
          { name: 'as', type: "'div' | 'section' | 'article' | 'aside'", defaultValue: "'div'", desc: '渲染标签，按语义选' },
          { name: 'padding', type: "'none' | 'sm' | 'md' | 'lg'", defaultValue: "'md'", desc: '内边距档位' },
          { name: 'hoverable', type: 'boolean', defaultValue: 'false', desc: '悬停加深阴影' },
          { name: 'className / style', type: 'string / CSSProperties', desc: '布局微调，例如绝对定位角标' },
        ]}
      />
    </Section>
  )
}