Tu Carrito de Compras

quiero-que-hagas-que-aca-se-aumente-de-1-en-1-y-disminuya-de-1-en-1-el-producto-como-en-la-tiendar-online-al-tener-un-producto-en-el-carrito:import-React-from-'react';-import-{-useCart-}-from-'./CartContext';-//-Importa-el-hook-del-contexto-import-{-Typography,-Container,-Card,-CardMedia,-CardContent,-CardActions,-Button,-Grid,-Box,-IconButton-}-from-'@mui/material';-import-{-Add-as-AddIcon,-Remove-as-RemoveIcon-}-from-'@mui/icons-material';-const-Cart-=-()-=>-{-const-{-cart,-clearCart,-updateCartQuantity-}-=-useCart();-//-Agrupa-productos-por-ID-y-calcula-la-cantidad-const-groupedCart-=-cart.reduce((acc,-product)-=>-{-const-existingProduct-=-acc.find((p)-=>-p.id-===-product.id);-if-(existingProduct)-{-existingProduct.quantity-+=-1;-}-else-{-acc.push({-...product,-quantity:-1-});-}-return-acc;-},-[]);-return-(-<Container>-<Typography-variant="h4"-gutterBottom>-Tu-Carrito-</Typography>-{groupedCart.length-===-0-&&-(-<Typography-variant="body1"-align="center"-sx={{-marginTop:-4-}}>-El-carrito-está-vacío.-</Typography>-)}-<Grid-container-spacing={4}>-{groupedCart.map((producto)-=>-(-<Grid-item-xs={12}-sm={6}-md={4}-key={producto.id}>-<Card-sx={{-display:-'flex',-flexDirection:-'column'-}}>-<CardMedia-component="img"-image={producto.imagen-||-'default-image.jpg'}-alt={producto.nombre}-sx={{-height:-200,-objectFit:-'contain',-}}-/>-<CardContent>-<Typography-variant="h6">{producto.nombre}</Typography>-<Typography-variant="body2"-sx={{-marginBottom:-2-}}>-Precio-unitario:-${producto.precio_venta}-</Typography>-<Typography-variant="body2">-Subtotal:-${(producto.precio_venta-*-producto.quantity).toFixed(2)}-</Typography>-</CardContent>-<CardActions-sx={{-justifyContent:-'space-between',-alignItems:-'center'-}}>-{/*-Controles-de-cantidad-*/}-<Box-display="flex"-alignItems="center">-<IconButton-onClick={()-=>-updateCartQuantity(producto.id,-producto.quantity---1)}-disabled={producto.quantity-<=-1}->-<RemoveIcon-/>-</IconButton>-<Typography-variant="body2"-sx={{-margin:-'0-8px'-}}>-{producto.quantity}-</Typography>-<IconButton-onClick={()-=>-updateCartQuantity(producto.id,-producto.quantity-+-1)}-disabled={producto.quantity->=-10}->-<AddIcon-/>-</IconButton>-</Box>-<Button-onClick={()-=>-updateCartQuantity(producto.id,-0)}-//-Elimina-todas-las-unidades-variant="contained"-color="secondary"->-Eliminar-</Button>-</CardActions>-</Card>-</Grid>-))}-</Grid>-{groupedCart.length->-0-&&-(-<Box-sx={{-marginTop:-1-}}>-<Typography-variant="h6"-align="right">-Total:-$-{groupedCart-.reduce(-(total,-item)-=>-total-+-item.precio_venta-*-item.quantity,-0-)-.toFixed(2)}-</Typography>-<Button-onClick={clearCart}-variant="contained"-color="primary"-fullWidth-sx={{-marginTop:-2-}}->-Vaciar-Carrito-</Button>-</Box>-)}-</Container>-);-};-export-default-Cart;