import { type FC } from 'react';

import { TableContainer as MuiTableContainer } from '@mui/material';

import { type TableContainerProps } from './types';

const TableContainer: FC<TableContainerProps> = ({
  children,
  sx,
  containerRef,
  ...props
}) => {
  return (
    <MuiTableContainer
      ref={containerRef}
      sx={{
        border: theme =>
          `1px solid ${theme.palette.new.border.neutral.default}`,
        borderRadius: '16px',
        ...sx,
      }}
      {...props}
    >
      {children}
    </MuiTableContainer>
  );
};

export type { TableContainerProps };

export default TableContainer;
