import { Card, Cover, Space } from '@stash/ui'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

/** 演示用的渐变色块，避免依赖外部图片 */
const swatch = (from: string, to: string) =>
  `data:image/svg+xml;utf8,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="600"><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="400" height="600" fill="url(#g)"/></svg>`,
  )}`

export function Covers() {
  return (
    <Section
      id="cover"
      title="封面卡"
      api="Cover"
      desc="比例封面卡：图片 + 底部压暗层 + 标题。海报、图文、宽图共用一套，避免每个列表各写一份 aspect-ratio 和渐变遮罩。"
    >
      <Demo
        title="三种比例"
        desc="poster 2:3（海报）、article 4:3（图文）、wide 16:9（横幅）；标题最多两行，超出省略。"
        code={`<Cover ratio="poster" src={cover} alt="海报" caption="海报 2:3" />
<Cover ratio="article" src={cover} alt="图文" caption="图文 4:3" />
<Cover ratio="wide" src={cover} alt="横幅" caption="横幅 16:9" />`}
      >
        <Space gap="md" align="start">
          <div style={{ width: 120 }}>
            <Cover
              ratio="poster"
              src={swatch('#7c5cff', '#c04bff')}
              alt="海报示例"
              caption="海报 2:3"
            />
          </div>
          <div style={{ width: 180 }}>
            <Cover
              ratio="article"
              src={swatch('#1f6feb', '#4abd86')}
              alt="图文示例"
              caption="图文 4:3"
            />
          </div>
          <div style={{ width: 220 }}>
            <Cover
              ratio="wide"
              src={swatch('#ff7a45', '#ffba3a')}
              alt="横幅示例"
              caption="横幅 16:9"
            />
          </div>
        </Space>
      </Demo>

      <Demo
        title="贴边 + 可点击"
        desc="放在 Card padding='none' 里时传 radius='none'；传 onClick 整块变成按钮，支持键盘操作。"
        layout="column"
        code={`<Card padding="none">
  <Cover radius="none" ratio="article" onClick={open} caption="可点击的封面" />
</Card>`}
      >
        <Card padding="none" style={{ maxWidth: 280 }}>
          <Cover
            radius="none"
            ratio="article"
            src={swatch('#3f51b5', '#00bcd4')}
            alt="可点击的封面"
            caption="可点击的封面"
            onClick={() => undefined}
          />
        </Card>
      </Demo>

      <PropsTable
        rows={[
          { name: 'ratio', type: "'poster' | 'article' | 'wide' | number", defaultValue: "'article'", desc: '2:3 / 4:3 / 16:9 / 自定义宽高比' },
          { name: 'src', type: 'string', desc: '图片地址，不传显示占位字符' },
          { name: 'alt', type: 'string', required: true, desc: '图片说明，同时作为按钮 title' },
          { name: 'caption', type: 'ReactNode', desc: '底部标题（最多两行）' },
          { name: 'radius', type: "'cover' | 'none'", defaultValue: "'cover'", desc: '8px / 贴边' },
          { name: 'lift', type: 'boolean', defaultValue: 'true', desc: '悬停整块上浮 2px（参考站行为）' },
          { name: 'hoverZoom', type: 'boolean', defaultValue: 'false', desc: '悬停放大图片（与 lift 二选一）' },
          { name: 'onClick', type: '() => void', desc: '传了就把整块变成按钮' },
        ]}
      />
    </Section>
  )
}