text: import React, { useContext } from 'react';
  import CartContext from '../../Store/CartContext';
  import Modal from '../UI/Modal';
  import classes from './Cart.module.css';
  import CartItem from './CartItem';
  
  const Cart = (props) => {
      const cartCtx = useContext(CartContext);
      const totalamount = `$${cartCtx.totalamount.toFixed(2)}`;
      const hasitems = cartCtx.items.length > 0;
  
      const cartItemAddHandler = item => {
          cartCtx.addItem({ ...item, amount: 1 });
  
      }
      const cartItemRemoveHandler = id => {
          cartCtx.removeItem(id);
  
      }
  
      const cartItems = (
          <ul className={classes['cart-items']}>
              {
                  cartCtx.items.map((item) => (
                      <CartItem
                          key={item.id}
                          name={item.name}
                          amount={item.amount}
                          price={item.price}
                          onRemove={cartItemRemoveHandler.bind(null, item.id)}
                          onAdd={cartItemAddHandler.bind(null, item)} />
                  ))
              }
          </ul >
      );
      return <Modal onClick={props.onHideCart}>
          {cartItems}
          <div className={classes.total}>
              <span>Total Amount</span>
              <span>{totalamount}</span>
          </div>
          <div className={classes.actions}>
              <button className={classes['button--alt']} onClick={props.onHideCart}>Close</button>
              {hasitems && <button className={classes.button}>Order</button>}
          </div>
      </Modal>;
  }
  
  export default Cart;
  