import { useState } from 'react'
import { Card, Pagination, Space } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

export function Paginations() {
  const [page, setPage] = useState(1)
  const [longPage, setLongPage] = useState(6)

  return (
    <Section
      id="pagination"
      title="分页"
      api="Pagination"
      desc="对齐参考站 .page-numbers：32×32 方块、4px 圆角、当前页主色实底白字；页数多时自动用省略号收起。"
    >
      <Demo
        title="基础用法"
        desc="总数 + 每页条数算出页数；上一页/下一页在边界自动禁用。"
        layout="column"
        code={`const [page, setPage] = useState(1)

<Pagination page={page} total={42} pageSize={10} onChange={setPage} />`}
      >
        <Space justify="between" wrap>
          <span style={{ color: 'var(--su-text-muted)', fontSize: 13 }}>
            第 {page} 页 / 共 5 页
          </span>
          <Pagination page={page} total={42} pageSize={10} onChange={setPage} />
        </Space>
      </Demo>

      <Demo
        title="页数很多"
        desc="当前页左右各留 1 个页码，首尾固定，其余折叠成省略号。"
        layout="column"
        code={`<Pagination page={page} total={200} pageSize={10} onChange={setPage} />`}
      >
        <Pagination page={longPage} total={200} pageSize={10} onChange={setLongPage} />
      </Demo>

      <Demo
        title="放进卡片底部"
        desc="分页通常和「共 N 条」一起出现，用 Space justify=between 撑开即可。"
        layout="column"
        code={`<Card padding="sm">
  <Space justify="between">
    <span>共 16 条内容</span>
    <Pagination page={page} total={16} pageSize={6} onChange={setPage} />
  </Space>
</Card>`}
      >
        <Card padding="sm">
          <Space justify="between" wrap>
            <span style={{ color: 'var(--su-text-muted)', fontSize: 13 }}>共 16 条内容</span>
            <Pagination page={Math.min(page, 3)} total={16} pageSize={6} onChange={setPage} />
          </Space>
        </Card>
      </Demo>

      <PropsTable
        rows={[
          { name: 'page', type: 'number', required: true, desc: '当前页，从 1 开始' },
          { name: 'total', type: 'number', required: true, desc: '总条数' },
          { name: 'pageSize', type: 'number', defaultValue: '10', desc: '每页条数' },
          { name: 'onChange', type: '(page: number) => void', required: true, desc: '翻页回调' },
          { name: 'siblings', type: 'number', defaultValue: '1', desc: '当前页左右各显示几个页码' },
        ]}
      />
    </Section>
  )
}