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 = () =>
  // { handelFilter }
  {
    const navigate = useNavigate();
    const theme = useTheme();
    const matchDownMD = useMediaQuery(theme.breakpoints.down('lg'));

    return (
      <MainCard content={false}>
        <Grid
          container
          alignItems="center"
          justifyContent="center"
          spacing={3}
          sx={{ p: 2, minHeight: 'calc(100vh - 250px)' }}
          direction={'row'}
          flexWrap={{ xs: 'wrap', sm: 'nowrap' }}
        >
          <Grid item xs={12} custom500={6} display={'flex'} justifyContent={'end'} sx={{}}>
            <CardMedia
              component="img"
              image={theme.palette.mode === ThemeMode.DARK ? imageDarkEmpty : imageEmpty}
              title="Cart Empty"
              sx={{ width: { xs: 250, sm: 300, md: 400 } }}
            />
          </Grid>
          <Grid item xs={12} custom500={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>
              <Box sx={{ pt: 3 }}>
                <Button
                  variant="contained"
                  size="large"
                  color="primary"
                  endIcon={<RightOutlined />}
                  onClick={() => navigate('/products/add')}
                >
                  {/* Reset Filter */}
                  Add New Products
                </Button>
              </Box>
            </Stack>
          </Grid>
        </Grid>
      </MainCard>
    );
  };

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

export default ProductEmpty;
