coffee/components/cards/cart-card/CartCard.jsx

import { Box, Button, ButtonGroup, Card, Typography } from '@mui/material';
import Image from 'next/image';
import PropType from 'prop-types';
import { useState } from 'react';

const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
  const [quantity, setQuantity] = useState(initialQuantity);

  // useEffect(() => {
  //   updateQuantity(product?.customID, quantity);
  // }, [quantity]);

  return (
    <Card
      sx={{
        backgroundColor: '#f2f2f2',
        p: 2,
        mb: 2,
      }}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: { xs: 'column', md: 'row' },
          justifyContent: { xs: 'center' },
        }}
      >
        <Box sx={{ display: { xs: 'none', md: 'flex', width: '20%' } }}>
          <Image
            src="/images/coffee-mug.svg"
            alt="profile"
            width={500}
            height={300}
          />
        </Box>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyItems: 'center',
            width: { md: '40%' },
          }}
        >
          <Typography
            align="center"
            sx={{
              mb: { xs: 10, sm: 5, md: 0 },
              mr: { md: 5 },
              width: '100%',
              fontWeight: 600,
              fontSize: { xs: 16, sm: 20 },
            }}
          >
            {product?.name}
          </Typography>
        </Box>
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            mb: { xs: 10, sm: 5, md: 0 },
            mr: { md: 5 },
          }}
        >
          <Typography
            sx={{
              width: '100%',
              textAlign: 'center',
              height: 16,
              fontSize: 14,
            }}
          >
            Quantity
          </Typography>
          <ButtonGroup
            size="small"
            aria-label="small outlined button group"
            sx={{
              height: 35,
              mt: 1,
              backgroundColor: 'primary.main',
              color: 'white',
              border: 0,
            }}
          >
            <Button
              sx={{
                color: 'white',
                fontSize: 17,
                width: 25,
              }}
              onClick={() => {
                if (quantity > 0) {
                  updateQuantity(product?.customID, quantity - 1);
                  setQuantity((prevState) => prevState - 1);
                }
              }}
            >
              -
            </Button>
            <Button
              sx={{
                color: 'white',
                fontSize: 15,
                width: 25,
              }}
            >
              {quantity}
            </Button>
            <Button
              sx={{
                color: 'white',
                fontSize: 17,
                width: 25,
              }}
              onClick={() => {
                updateQuantity(product?.customID, quantity + 1);
                setQuantity((prevState) => prevState + 1);
              }}
            >
              +
            </Button>
          </ButtonGroup>
          <Button
            disableRipple
            sx={{
              height: 35,
              mt: 1,
              width: 118,
              fontSize: 15,
              textTransform: 'none',
              backgroundColor: '#C6453E',
              color: 'white',
            }}
            startIcon={
              <Image src="/images/x.svg" alt="remove" width={15} height={15} />
            }
            onClick={() => remove(product.customID)}
          >
            Remove
          </Button>
        </Box>
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Typography
            sx={{
              width: '100%',
              textAlign: 'center',
              height: 25,
              fontSize: { xs: 15, md: 18 },
            }}
          >
            Price: ${product?.price}
          </Typography>
        </Box>
      </Box>
    </Card>
  );
};

CartCard.propTypes = {
  product: PropType.shape({
    category: PropType.string,
    name: PropType.string,
    image: PropType.string,
    description: PropType.string,
    place: PropType.string,
    people: PropType.string,
    process: PropType.string,
    pairing: PropType.string,
    available: PropType.Boolean,
    isFeatured: PropType.Boolean,
    price: PropType.number,
    customID: PropType.string,
  }),
  initialQuantity: PropType.number,
  remove: PropType.func,
  updateQuantity: PropType.func,
};
export default CartCard;