import { Box, TableCell, Typography } from '@mui/material'
import noDataImage from './no-data-illu.svg'

const NoRecordsFound = ({ colLength }) => {
  return (
    <TableCell colSpan={colLength}>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <img
          style={{ width: '200px', height: 'auto', textAlign: 'center' }}
          src={noDataImage}
        />
        <Typography
          variant="h6"
          align="center"
          sx={{ opacity: '0.5', marginTop: '16px' }}
        >
          No Records Found
        </Typography>
      </Box>
    </TableCell>
  )
}

export default NoRecordsFound
