import { Grid, Image, Space, Text } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

const svg = (from: string, to: string) =>
  `data:image/svg+xml;utf8,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${from}"/><stop offset="1" stop-color="${to}"/></linearGradient></defs><rect width="800" height="450" fill="url(#g)"/></svg>`,
  )}`

export function Images() {
  return (
    <Section
      id="image"
      title="图片"
      api="Image"
      desc="带比例、圆角、加载失败降级的图片。正文配图、相册、缩略图用它；带标题遮罩的封面卡用 Cover。"
    >
      <Demo
        title="比例"
        desc="square 1:1、video 16:9、wide 21:9，也可以直接传数字（宽高比），容器宽度自适应。"
        layout="column"
        code={`<Image ratio="square" src={src} alt="方形" />
<Image ratio="video" src={src} alt="16:9" />
<Image ratio={4 / 3} src={src} alt="4:3" />`}
      >
        <Grid columns={3} gap="md">
          <Image ratio="square" src={svg('#3f51b5', '#00bcd4')} alt="方形示例" radius="md" />
          <Image ratio="video" src={svg('#ff7a45', '#ffba3a')} alt="16:9 示例" radius="md" />
          <Image ratio={4 / 3} src={svg('#7c5cff', '#c04bff')} alt="4:3 示例" radius="md" />
        </Grid>
      </Demo>

      <Demo
        title="填充方式与圆角"
        desc="cover 裁切填满（默认），contain 完整显示（多用于截图 / 图表）；圆角四档。"
        layout="column"
        code={`<Image fit="contain" radius="none" src={src} alt="完整显示" />
<Image fit="cover" radius="cover" src={src} alt="裁切" />`}
      >
        <Grid columns={2} gap="md">
          <Image
            fit="contain"
            radius="none"
            ratio="video"
            src={svg('#1f6feb', '#4abd86')}
            alt="contain 示例"
          />
          <Image fit="cover" radius="cover" ratio="video" src={svg('#ff4d4f', '#ff952f')} alt="cover 示例" />
        </Grid>
      </Demo>

      <Demo
        title="加载失败"
        desc="图片地址失效时退化为占位块，不会出现破图；可传 fallback 换成文案或图标。"
        layout="column"
        code={`<Image src="/not-exists.png" alt="加载失败" fallback="图" />`}
      >
        <Space gap="md" align="start">
          <div style={{ width: 160 }}>
            <Image src="/not-exists.png" alt="加载失败" ratio="square" radius="md" fallback="图" />
          </div>
          <Text size="sm" tone="muted">
            失败后显示 fallback（这里传了「图」）
          </Text>
        </Space>
      </Demo>

      <PropsTable
        rows={[
          { name: 'src', type: 'string', required: true, desc: '图片地址' },
          { name: 'alt', type: 'string', required: true, desc: '替代文本' },
          {
            name: 'ratio',
            type: "'square' | 'video' | 'wide' | number",
            defaultValue: "'video'",
            desc: '1:1 / 16:9 / 21:9 / 自定义宽高比',
          },
          { name: 'fit', type: "'cover' | 'contain'", defaultValue: "'cover'", desc: '裁切 / 完整显示' },
          { name: 'radius', type: "'none' | 'sm' | 'md' | 'cover'", defaultValue: "'sm'", desc: '0 / 6 / 12 / 8px' },
          { name: 'fallback', type: 'ReactNode', desc: '加载失败时的占位内容' },
        ]}
      />
    </Section>
  )
}