import React, { forwardRef } from 'react';
import { type PaperOwnProps, TableContainer as MuiTableContainer } from '@mui/material';

type Elevation = PaperOwnProps['elevation'];

type Props = {
  elevation?: Elevation;
} & React.ComponentProps<typeof MuiTableContainer>;

const TableContainer = forwardRef<HTMLDivElement, Props>(({ elevation, sx, ...rest }, ref) => (
  <MuiTableContainer
    ref={ref}
    {...rest}
    sx={{
      ...(typeof elevation === 'number' && {
        boxShadow: (theme) => theme.shadows[elevation],
      }),
      ...sx,
    }}
  />
));

TableContainer.displayName = 'TableContainer';

export default TableContainer;
