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

import { Box, Button, ButtonGroup, Paper, 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 (
    <Paper
      sx={{
        p: 1,
        width: { lg: '88%', xs: '73%', md: '80%' },
        mb: 2,
        ml: 12,
        backgroundColor: '#f2f2f2',
        display: 'flex',
        justifyContent: { xs: 'center', md: 'none' },
      }}
      elevation={3}
    >
      <Box sx={{ width: '30%', display: { xs: 'none', md: 'block' } }}>
        <Image
          src="/images/coffee-mug.svg"
          alt="profile"
          width={500}
          height={300}
        />
      </Box>
      <Box
        sx={{
          ml: -4,
          mr: 2,
          display: 'flex',
          alignItems: 'center',
          width: '30%',
        }}
      >
        <Typography
          sx={{
            width: '100%',
            textAlign: 'center',
            height: 25,
            fontWeight: 600,
            ml: { xs: -1, sm: 0 },
            fontSize: { xs: 16, sm: 20 },
          }}
        >
          {product?.name}
        </Typography>
      </Box>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          width: '20%',
          justifyContent: 'center',
          alignItems: 'center',
          ml: { xs: 2, sm: 0 },
        }}
      >
        <Typography
          sx={{
            width: '100%',
            textAlign: 'center',
            height: 16,
            fontSize: 14,
          }}
        >
          Quantity
        </Typography>
        <ButtonGroup
          size="small"
          aria-label="small outlined button group"
          sx={{
            height: 35,
            width: 125,
            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
          sx={{
            height: 35,
            mt: 1,
            width: 125,
            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={{
          ml: { xs: 5, sm: 3 },
          display: 'flex',
          flexDirection: 'column',
          width: '20%',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Typography
          sx={{
            width: '100%',
            textAlign: 'center',
            height: 25,
            fontSize: { xs: 15, md: 18 },
          }}
        >
          Price: ${product?.price}
        </Typography>
      </Box>
    </Paper>
  );
};

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;