Untitled

import React, { useContext } from "react";
import './Cartitems.css'
import { CartContext } from "./CartContext";
import remove_icon from "../Components/Assets/cart_cross_icon.png"

const Cartitems = () => {
    const { getTotalCartAmount, products, cartItems, removefromcart } = useContext(CartContext);
    return (
        <div className="cartitems">
            <div className="cartitems-format-main">
                <p>Products</p>
                <p>Title</p>
                <p>Price</p>
                <p>Quantity</p>
                <p>Total</p>
                <p>Remove</p>
                <p>Checkout</p>
            </div>
            <hr />
            {products.map((e)=> {
                if(cartItems[e.id] > 0) 
                    {
                    return (
                        <div>
                            <div className="cartitems-format cartitems-format-main">
                                <img src={e.image} alt="" className="carticon-product-icon" />
                                <p>{e.name}</p>
                                <p>Rs{e.new_price}</p>
                                <button className="cartitems-quantity">{cartItems[e.id]}</button>
                                <p>Rs{e.new_price * cartItems[e.id]}</p>
                                <img className="cartitems-remove-icon" src={remove_icon} onClick={() => { removefromcart(e.id) }} alt="" />
                            </div>
                            <hr />
                        </div>
                    )
                } else {
                    return null; // Return null when the condition is not met
                }
            })}
            <div className="cartitems-down">
                <div className="cartitems-total">
                    <h1>Cart Totals</h1>
                    <div>
                        <div  className="cartitems-total-item">
                            <p>Subtotal</p>
                            <p>Rs{getTotalCartAmount()}</p>
                        </div>
                        <hr/>
                        <div className="cartitems-total-item">
                            <p>Shipping Fee</p>
                            <p>Free</p>
                        </div>
                        <hr/>
                        <div className="cartitems-total-item">
                            <h3>Total</h3>
                            <h3>Rs{getTotalCartAmount}</h3>
                        </div>
                    </div>
                    <button>PROCEED TO CHECKOUT</button>
                </div>
                <div className="cartitems-promocode">
                    <p>If you have a promo code, Enter it here</p>
                    <div className="cartitems-promobox">
                        <input type="text" placeholder="promo code"></input>
                        <button>Submit</button>
                    </div>

                </div>

            </div>
        </div>
    )
}
export default Cartitems;