import { Button, Empty, Notice, Space } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

export function Feedback() {
  return (
    <Section
      id="feedback"
      title="提示与空态"
      api="Notice / Empty"
      desc="页面里最常见的两种「没有内容」：一种是正常的空，一种是出了错。别让它们长得一样。"
    >
      <Demo
        title="空态"
        desc="空态只说明情况；带操作的空态能让用户立刻回到有内容的路径上。"
        layout="column"
        code={`<Empty text="暂无内容" />
<Empty
  text="没有匹配「设计」的内容"
  action={<Button size="sm" variant="secondary">清空搜索</Button>}
/>`}
      >
        <Empty text="暂无内容" />
        <Empty
          text="没有匹配「设计」的内容，换个关键字试试。"
          action={
            <Space gap="sm">
              <Button size="sm" variant="secondary">
                清空搜索
              </Button>
              <Button size="sm" variant="ghost">
                查看全部
              </Button>
            </Space>
          }
        />
      </Demo>

      <Demo
        title="说明与错误"
        desc="错误态带 role=alert，屏幕阅读器会立刻播报；说明态没有这个角色，避免每次渲染都被念。"
        layout="column"
        code={`<Notice title="内容库读取失败">…</Notice>
<Notice tone="error" title="连不上 Stash 服务" action={{ label: '重试', onClick }}>…</Notice>`}
      >
        <Notice title="还没有项目">在托管目录下建一个子目录并放入 index.html，刷新后就会出现在这里。</Notice>
        <Notice
          tone="error"
          title="连不上 Stash 服务"
          action={{ label: '重试', onClick: () => window.location.reload() }}
        >
          Failed to fetch /api/projects
        </Notice>
      </Demo>

      <PropsTable
        rows={[
          { name: 'tone', type: "'info' | 'error'", defaultValue: "'info'", desc: '说明 / 错误' },
          { name: 'title', type: 'ReactNode', required: true, desc: '标题行' },
          { name: 'children', type: 'ReactNode', desc: '正文' },
          { name: 'action', type: '{ label: string; onClick: () => void }', desc: '底部操作按钮' },
        ]}
      />

      <PropsTable
        rows={[
          { name: 'text', type: 'ReactNode', defaultValue: "'暂无内容'", desc: '空态文字' },
          { name: 'action', type: 'ReactNode', desc: '文字下方的操作区' },
        ]}
      />
    </Section>
  )
}