import { Table } from '@douyinfe/semi-ui-19';
import type { TableProps } from '@douyinfe/semi-ui-19/lib/es/table/interface';
import type { ReactNode } from 'react';

import { PageEmpty } from './PageEmpty.js';

export interface DataTableProps<T extends Record<string, unknown>> {
  columns: NonNullable<TableProps<T>['columns']>;
  dataSource: T[];
  loading?: boolean;
  rowKey?: TableProps<T>['rowKey'];
  pagination?: TableProps<T>['pagination'];
  empty?: ReactNode;
  size?: TableProps<T>['size'];
  scroll?: TableProps<T>['scroll'];
  className?: string;
  onRow?: TableProps<T>['onRow'];
}

/**
 * 列表表格统一封装：加载态 + 空态 + 行 key 约定。
 * 业务页只负责列定义与数据，不重复写 Empty / loading。
 */
export function DataTable<T extends Record<string, unknown>>({
  columns,
  dataSource,
  loading = false,
  rowKey = 'id',
  pagination = false,
  empty,
  size = 'middle',
  scroll,
  className,
  onRow,
}: DataTableProps<T>): ReactNode {
  return (
    <Table<T>
      className={`lx-data-table${className === undefined ? '' : ` ${className}`}`}
      columns={columns}
      dataSource={dataSource}
      loading={loading}
      rowKey={rowKey}
      pagination={pagination}
      size={size}
      scroll={scroll}
      onRow={onRow}
      empty={empty ?? <PageEmpty />}
    />
  );
}