import { Table, Tag, Text } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

const COLUMNS = [
  { key: 'name', title: '分区' },
  { key: 'kind', title: '类型', width: 100 },
  { key: 'count', title: '条目数', width: 100, align: 'right' as const },
  { key: 'status', title: '状态', width: 120 },
]

const ROWS = [
  {
    id: 'recommend',
    name: '常用推荐',
    kind: <Text size="sm">apps</Text>,
    count: 18,
    status: <Tag tone="success">已上线</Tag>,
  },
  {
    id: 'movie',
    name: '推荐电影',
    kind: <Text size="sm">posters</Text>,
    count: 12,
    status: <Tag tone="success">已上线</Tag>,
  },
  {
    id: 'ces',
    name: 'CES 现场报道',
    kind: <Text size="sm">articles</Text>,
    count: 12,
    status: <Tag tone="warning">草稿</Tag>,
  },
]

export function Tables() {
  return (
    <Section
      id="table"
      title="表格"
      api="Table"
      desc="只做展示：列定义 + 行数据 + 空态。排序、筛选、分页由页面组合，组件不内置交互。"
    >
      <Demo
        title="基础表格"
        desc="列宽、对齐方式按列配置；单元格内容可以是任意 ReactNode（这里用了 Tag 与 Text）。"
        layout="column"
        code={`const columns = [
  { key: 'name', title: '分区' },
  { key: 'count', title: '条目数', width: 100, align: 'right' },
]

<Table columns={columns} rows={rows} rowKey="id" />`}
      >
        <Table columns={COLUMNS} rows={ROWS} rowKey="id" />
      </Demo>

      <Demo
        title="紧凑档"
        desc="size='sm' 把行高收一档，配置面板那种列多、面板窄的场景用它。"
        layout="column"
        code={`<Table columns={COLUMNS} rows={ROWS} size="sm" />`}
      >
        <Table columns={COLUMNS} rows={ROWS} size="sm" />
      </Demo>

      <Demo
        title="空态"
        desc="空数据时渲染默认文案；也可以传 emptyText 换一句更具体的说明。"
        layout="column"
        code={`<Table columns={columns} rows={[]} emptyText="还没有分区" />`}
      >
        <Table columns={COLUMNS} rows={[]} emptyText="还没有分区，先建一个吧。" />
      </Demo>

      <PropsTable
        rows={[
          { name: 'columns', type: 'TableColumn[]', required: true, desc: '{ key, title, width?, align? }' },
          { name: 'rows', type: 'Record<string, ReactNode>[]', required: true, desc: '行数据，键对应列的 key' },
          { name: 'rowKey', type: 'string', defaultValue: "'id'", desc: '行的唯一键字段' },
          { name: 'size', type: "'md' | 'sm'", defaultValue: "'md'", desc: '行高密度' },
          { name: 'emptyText', type: 'ReactNode', defaultValue: "'暂无数据'", desc: '空态文案' },
        ]}
      />
    </Section>
  )
}