import { ProTable, ProTableOptions } from '@tidbcloud/uikit/biz'
import { mergeSxList } from '@tidbcloud/uikit/utils'
export interface FilledTableProps {
  highlightOnHover?: boolean
}

export const FilledTable = <T extends Record<string, any> = {}>({
  highlightOnHover,
  mantineTableContainerProps = {},
  ...props
}: ProTableOptions<T> & FilledTableProps) => {
  let sx = undefined
  if ('sx' in mantineTableContainerProps) {
    sx = mantineTableContainerProps.sx as any
  }
  return (
    <ProTable<T>
      emptyMessage="No Data."
      mantineTableContainerProps={{
        ...mantineTableContainerProps,
        sx: mergeSxList([{ overflow: 'auto' }, sx])
      }}
      mantineTableProps={{
        verticalSpacing: 8,
        horizontalSpacing: 'sm',
        sx: {
          'thead tr th:first-of-type': {
            paddingLeft: 24
          },
          tbody: {
            tr: {
              cursor: highlightOnHover ? 'pointer' : undefined,
              'td:first-of-type': {
                paddingLeft: 24
              }
            }
          }
        }
      }}
      manualPagination={true}
      {...props}
    />
  )
}