"use client";
import React from "react";
import Image from "next/image";
import { MdDeleteOutline } from "react-icons/md";
import { Button } from "@/components/ui/button";
import "./CartTab.css";

const CartTab = () => {
  const cartItems = true;

  const data = [
    {
      id: 1,
      title: "Product 1",
      oldPrice: 19,
      price: 12,
      isNew: true,
      desc: "Short sleeve t-shirt",
      image:
        "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,womens,101010:01c5ca27c6,front,square_product,600x600.jpg",
    },
    {
      id: 2,
      title: "Product 2",
      oldPrice: 19,
      price: 12,
      isNew: false,
      desc: "Short sleeve t-shirt",
      image:
        "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,flatlay,101010:01c5ca27c6,front,wide_portrait,750x1000-bg,f8f8f8.jpg",
    },
  ];
  return (
    <div className="cart absolute p-5 text-slate-600 top-28 right-0">
      {data?.map((item) => (
        <div className="item flex gap-5 items-center mb-[30px] " key={item.id}>
          <div className="relative w-[80px] h-[100px]">
            <Image
              src={item.image}
              fill
              style={{ objectFit: "cover" }}
              className=""
              alt="item picture"
            />
          </div>
          <div className="details">
            <h1>{item.title}</h1>
            <p className="text-sm">{item.desc?.substring(0, 100)}</p>
            <div className="price">1 x ${item.price}</div>
          </div>
          <MdDeleteOutline className="delete-icon mt-16" />
        </div>
      ))}
      <div className="total">
        <span>SUBTOTAL</span>
        <span>$123</span>
      </div>
      <Button className="bg-[#F45B1E] text-white checkout rounded-none w-full">PROCEED TO CHECKOUT</Button>
      {/* <span className="reset">Reset Cart</span> */}
    </div>
  );
};

export default CartTab;
