import { Paper, Table, TableBody, TableContainer } from '@mui/material'
import type { SxProps, Theme } from '@mui/material'
import type { ReactNode } from 'react'
import { LoadingRows } from './LoadingRows'
import { EmptyTableState } from './EmptyTableState'

interface DataTableShellProps {
  toolbar?: ReactNode
  children: ReactNode
  loading?: boolean
  loadingRows?: number
  loadingCols?: number
  empty?: boolean
  emptySlot?: ReactNode
  emptyColSpan?: number
  stickyHeader?: boolean
  size?: 'small' | 'medium'
  sx?: SxProps<Theme>
}

export function DataTableShell({
  toolbar,
  children,
  loading = false,
  loadingRows = 5,
  loadingCols = 6,
  empty = false,
  emptySlot,
  emptyColSpan = 6,
  stickyHeader = false,
  size = 'small',
  sx,
}: DataTableShellProps) {
  return (
    <Paper variant="outlined" sx={{ borderRadius: 1.5, overflow: 'hidden', ...sx }}>
      {toolbar}
      <TableContainer>
        <Table size={size} stickyHeader={stickyHeader}>
          {!loading && children}
          {loading && (
            <TableBody>
              <LoadingRows rows={loadingRows} cols={loadingCols} />
            </TableBody>
          )}
          {!loading && empty && (
            <TableBody>
              {emptySlot ?? <EmptyTableState colSpan={emptyColSpan} />}
            </TableBody>
          )}
        </Table>
      </TableContainer>
    </Paper>
  )
}
