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

export function Results() {
  return (
    <Section
      id="result"
      title="结果"
      api="Result"
      desc="整块的完成 / 失败反馈：提交完成、权限不足、出错。行内提示用 Notice，轻量反馈用 toast，整块状态才用 Result。"
    >
      <Demo
        title="四种状态"
        desc="success / error / warning / info 只影响图标与颜色，正文结构一致。"
        layout="column"
        code={`<Result status="success" title="已发布" description="内容已同步到内容库。" />`}
      >
        <Space direction="column" gap="lg" align="stretch">
          <Result status="success" title="已发布" description="内容已同步到内容库，5 秒内会推送到首页。" />
          <Result status="error" title="保存失败" description="内容库结构版本不匹配，请删除数据库后重启。" />
        </Space>
      </Demo>

      <Demo
        title="带操作"
        desc="actions 放按钮组；按钮顺序与弹窗一致——次要操作在左、主操作在右。"
        layout="column"
        code={`<Result
  status="warning"
  title="还没有内容"
  description="建一个分区，再往里加条目。"
  actions={<><Button variant="ghost">看文档</Button><Button>新建分区</Button></>}
/>`}
      >
        <Result
          status="warning"
          title="还没有内容"
          description="先在内容库里建一个分区，再往分区里加条目。"
          actions={
            <>
              <Button variant="ghost">看文档</Button>
              <Button>新建分区</Button>
            </>
          }
        />
      </Demo>

      <PropsTable
        rows={[
          { name: 'status', type: "'success' | 'error' | 'warning' | 'info'", defaultValue: "'info'", desc: '状态' },
          { name: 'title', type: 'ReactNode', required: true, desc: '标题' },
          { name: 'description', type: 'ReactNode', desc: '说明文字' },
          { name: 'actions', type: 'ReactNode', desc: '底部操作区' },
        ]}
      />
    </Section>
  )
}