coffee/components/product-card/ProductCard.jsx

import { Button, Typography } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';
import NextLink from 'next/link';
import { useStore, useStoreUpdate } from '../../store/cart-context';

const ProductCard = ({ product }) => {
  const { addCartValue } = useStoreUpdate();
  const { cartStorage } = useStore();
  const addProductToCart = (quantity) => addCartValue(product, quantity);
  const inCart = cartStorage?.some(
    (item) => item.product.customID === product.customID
  )
    ? true
    : false;
  return (
    <Box
      sx={{
        width: '100%',
        height: '100%',
        border: 'none',
        mb: '75px',
        backgroundColor: '#F5ECD4',
      }}
    >
      <Box width="100%">
        <NextLink
          style={{ cursor: 'pointer' }}
          href={`/products/${product.customID}`}
          passHref
        >
          <Image
            src="/images/product-card-image.jpg"
            alt="product image"
            width={630}
            height={390}
          />
        </NextLink>
      </Box>
      <Box
        width="100%"
        sx={{
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <Typography fontSize="24px" align="center" pt={1} pb={3}>
          {product.name}
        </Typography>
        <Typography align="center" fontSize="18px" m={2}>
          {product.description}
        </Typography>
        <Typography fontSize="24px" align="center" pt={4}>
          ${product.price}
        </Typography>
        <Box textAlign="center" mt={1}>
          <Button
            disabled={inCart}
            onClick={() => addProductToCart(1)}
            sx={{
              backgroundColor: '#CBA213',
              height: 50,
              width: 150,
              color: 'white',
            }}
          >
            {inCart ? 'In Cart' : 'Add to cart'}
          </Button>
        </Box>
      </Box>
    </Box>
  );
};

export default ProductCard;