import { Box, Typography } from '@mui/material';
import InboxOutlinedIcon from '@mui/icons-material/InboxOutlined';

// ==============================|| EMPTY STATE ||============================== //

export default function EmptyState({ icon: Icon = InboxOutlinedIcon, title = 'No records found', caption, sx }) {
  return (
    <Box sx={{ textAlign: 'center', py: 6, px: 2, ...sx }}>
      <Box
        sx={{
          width: 72,
          height: 72,
          borderRadius: '50%',
          bgcolor: 'grey.100',
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          mb: 2
        }}
      >
        <Icon sx={{ fontSize: 34, color: 'grey.400' }} />
      </Box>
      <Typography variant="h5" color="text.secondary">
        {title}
      </Typography>
      {caption && (
        <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
          {caption}
        </Typography>
      )}
    </Box>
  );
}