import React from "react";
import { useShoppingCart } from "use-shopping-cart";

const CartItem = (props) => {
  const { item } = props;
  const { removeItem, cartDetails, incrementItem, decrementItem } =
    useShoppingCart();

  return (
    <div className="mb-4 flex flex-row rounded-lg bg-zinc-700 bg-opacity-30 p-3 backdrop-blur-lg backdrop-filter">
      <div className="image-container align-center relative mr-4 flex h-20 w-20 justify-center">
        <div className="my-auto max-h-full rounded-2xl">
          <img
            className="asset-image max-h-24 rounded-lg object-contain object-center"
            src={item.image}
            alt={item.name}
          />
        </div>
      </div>
      <div className="flex w-full flex-col justify-start">
        <div className=" flex w-full flex-row justify-between pb-1">
          <h2 className="mr-4 text-base font-semibold text-white">
            {item.name}
          </h2>
          <h2 className="text-base font-semibold text-white">
            {item.formattedValue}
          </h2>
        </div>
        <div className=" flex w-full flex-row justify-between pb-1">
          <p className="text-sm text-zinc-300">{item.description}</p>
        </div>
        <div className=" flex w-full flex-row justify-between">
          <div className="flex flex-row items-center justify-center">
            <button
              className="text-xs text-zinc-300"
              onClick={() => decrementItem(item.id)}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-3 w-3"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M18 12H6"
                />
              </svg>
            </button>
            <p className="mx-2 text-xs text-zinc-300">Qty {item.quantity}</p>
            <button
              className="text-xs text-zinc-300"
              onClick={() => incrementItem(item.id)}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-3 w-3"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M12 6v6m0 0v6m0-6h6m-6 0H6"
                />
              </svg>
            </button>
          </div>
          <button
            className="text-xs text-red-500"
            onClick={() => removeItem(item.id)}
          >
            Remove
          </button>
        </div>
      </div>
    </div>
  );
};

export default CartItem;