import { Avatar, Grid, Icon, Space } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'
import { DEMO_APPS, DEMO_COVER } from '../data/demo'

export function Avatars() {
  return (
    <Section
      id="avatars"
      title="头像"
      api="Avatar"
      desc="有图显示图片，没图（或图片加载失败）退化成首字色块——列表里最常见的两种状态都由它兜住。"
    >
      <Demo
        title="尺寸与形状"
        desc="sm 24px 用于紧凑列表，md 36px、lg 48px 用于卡片与详情头部；圆形用于人 / 应用，方形用于图标类封面。"
        code={`<Avatar size="sm" fallback="G" />
<Avatar size="md" fallback="G" />
<Avatar size="lg" fallback="G" />`}
      >
        <Avatar size="sm" fallback="G" />
        <Avatar size="md" fallback="G" />
        <Avatar size="lg" fallback="G" />
        <Avatar shape="square" size="md" fallback="N" />
        <Avatar shape="square" size="lg" fallback="F" />
      </Demo>

      <Demo
        title="图片与降级"
        desc="第三张故意给一个坏地址，用来验证加载失败会退回首字；最后一颗带认证角标。"
        code={`<Avatar src={cover} alt="GitHub" fallback="G" />
<Avatar src="/broken.png" fallback="?" />
<Avatar verified size="lg" fallback="S" />`}
      >
        <Avatar src={DEMO_COVER} alt="渐变封面" size="lg" />
        <Avatar src="/not-exist.png" alt="" size="lg" fallback="?" />
        <Avatar verified size="lg" fallback="S" />
        <Avatar verified size="md" fallback="B" />
      </Demo>

      <Demo
        title="列表里的组合"
        desc="头像 + 两行文字是应用条目的基本骨架：这一行本身不带底色和描边，靠间距分组。"
        layout="column"
        code={`<Space gap="md">
  <Avatar size="lg" fallback="G" />
  <Space direction="column" gap="xs" align="start">
    <strong>GitHub</strong>
    <span>代码托管与开源社区</span>
  </Space>
</Space>`}
      >
        <Grid columns={2} gap="lg">
          {DEMO_APPS.slice(0, 4).map((app) => (
            <Space key={app.id} gap="md">
              <Avatar size="lg" fallback={app.icon} />
              <Space direction="column" gap="xs" align="start">
                <span style={{ fontWeight: 500 }}>{app.name}</span>
                <span style={{ color: 'var(--su-text-muted)', fontSize: 12 }}>{app.desc}</span>
              </Space>
            </Space>
          ))}
        </Grid>
      </Demo>

      <Demo
        title="大尺寸与底色"
        desc="xl 64px 用于资料卡；无图时可以用 icon 代替字符，tone='primary' 换成品牌浅渐变底。"
        code={`<Avatar size="xl" tone="primary" icon={<Icon name="user_3_line" />} verified />
<Avatar size="xl" fallback="S" verified />`}
      >
        <Space gap="lg" align="end">
          <Avatar size="xl" tone="primary" icon={<Icon name="user_3_line" />} verified />
          <Avatar size="xl" fallback="S" verified />
          <Avatar size="lg" tone="primary" icon={<Icon name="folder_more_line" />} />
        </Space>
      </Demo>

      <PropsTable
        rows={[
          { name: 'src', type: 'string', desc: '图片地址；加载失败自动降级' },
          { name: 'alt', type: 'string', defaultValue: "''", desc: '图片替代文本' },
          { name: 'fallback', type: 'string', defaultValue: "'•'", desc: '无图时的字符' },
          { name: 'icon', type: 'ReactNode', desc: '无图时的图标（优先于 fallback）' },
          { name: 'size', type: "'sm' | 'md' | 'lg' | 'xl'", defaultValue: "'md'", desc: '24 / 36 / 48 / 64px' },
          { name: 'tone', type: "'neutral' | 'primary'", defaultValue: "'neutral'", desc: '无图底色：浅灰 / 品牌浅渐变' },
          { name: 'shape', type: "'circle' | 'square'", defaultValue: "'circle'", desc: '圆形 / 圆角方形' },
          { name: 'verified', type: 'boolean', defaultValue: 'false', desc: '右下角认证角标' },
        ]}
      />
    </Section>
  )
}