import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

import { Badge, IconButton } from '@mui/material';
import { useRouter } from 'next/router';
import { useContext } from 'react';
import { CartContext } from 'src/contexts/cart';

function CartIcon() {
  let router = useRouter();
  let { cart } = useContext(CartContext);

  if (!cart) return <></>;

  return (
    <>
      <IconButton
        onClick={() => {
          router.push('/shopfront/cart');
        }}
      >
        <Badge badgeContent={cart?.length} color="primary">
          <ShoppingCartIcon />
        </Badge>
      </IconButton>
    </>
  );
}

export default CartIcon;
