import PropTypes from 'prop-types';

// material-ui
import { useTheme } from '@mui/material/styles';
import { Box, Button, CardMedia, Grid, Stack, Typography, useMediaQuery } from '@mui/material';

// project import
import MainCard from 'components/MainCard';
import { ThemeMode } from 'config';

// assets
import { RightOutlined } from '@ant-design/icons';
import imageEmpty from 'assets/images/e-commerce/empty.png';
import imageDarkEmpty from 'assets/images/e-commerce/empty-dark.png';
import { useNavigate } from 'react-router';

// ==============================|| PRODUCT - NO/EMPTY FILTER ITEMS ||============================== //

const ProductEmpty = ({ sx }) => {
  const theme = useTheme();
  const matchDownMD = useMediaQuery(theme.breakpoints.down('lg'));

  return (
    <Grid container display={'flex'} alignItems={'center'} sx={{ height: '100%', ...sx }}>
      <Grid item xs={12} sm={6} display={'flex'} justifyContent={{ xs: 'center', sm: 'end' }}>
        <CardMedia
          sx={{ maxWidth: 400 }}
          component="img"
          image={theme.palette.mode === ThemeMode.DARK ? imageDarkEmpty : imageEmpty}
          title="Cart Empty"
        />
      </Grid>
      <Grid item xs={12} sm={6}>
        <Stack spacing={0.5} sx={{ textAlign: { xs: 'center', custom500: 'start' } }}>
          <Typography variant={matchDownMD ? 'h3' : 'h1'} color="inherit">
            No Products Available
          </Typography>
          <Typography variant="h5" color="textSecondary">
            Introduce new products to enhance customer engagement and boost revenue growth.
          </Typography>
        </Stack>
      </Grid>
    </Grid>
  );
};

ProductEmpty.propTypes = {
  handelFilter: PropTypes.func
};

export default ProductEmpty;
