"use client";

import { useCart } from "@/context/CartContext";

export default function CartIcon() {
  const { itemCount, openDrawer } = useCart();
  return (
    <button
      type="button"
      onClick={openDrawer}
      aria-label={`Bag, ${itemCount} items`}
      className="relative inline-flex items-center text-[#1d2739] hover:text-[#b08968]"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75} className="h-6 w-6">
        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 1.945-4.75 2.456-7.303.11-.55-.318-1.05-.878-1.05H5.223M7.5 14.25L5.106 5.272M7.5 14.25L4.5 4.5" />
      </svg>
      {itemCount > 0 ? (
        <span className="absolute -top-2 -right-2 flex h-5 min-w-5 items-center justify-center rounded-full bg-[#b08968] px-1 text-[10px] font-semibold text-white">
          {itemCount}
        </span>
      ) : null}
    </button>
  );
}