nshop-front-m/src/components/common/icons/cart/DeleteItemButton.tsx

import LoadingDots from "@components/common/icons/LoadingDots";
import { TrashIcon } from "@heroicons/react/24/outline";
import { useAddProduct } from "@utils/hooks/useAddToCart";
import clsx from "clsx";


function SubmitButton({
  loading,
  handleRemoveCart,
}: {
  loading: boolean;
  handleRemoveCart: () => void;
}) {
  return (
    <button
      aria-disabled={loading}
      aria-label="Remove cart item"
      className={clsx(
        "ease flex h-[17px] w-[17px] cursor-pointer items-center justify-center rounded-full  transition-all duration-200",
        {
          "cursor-wait px-0": loading,
        }
      )}
      type="button"
      onClick={handleRemoveCart}
    >
      {loading ? (
        <LoadingDots className="bg-black dark:bg-white" />
      ) : (
        <TrashIcon className="hover:text-accent-3 mx-[1px] h-6 w-6" />
      )}
    </button>
  );
}

interface CartItemEdge {
  node: {
    id: string;
    quantity: number;
    name: string;
    price: number;
  };
}

export function DeleteItemButton({ item }: { item: CartItemEdge }) {
  const { deleteProductFromCart, isRemoveLoading } = useAddProduct();
  const itemId = item?.node?.id;
  const handleRemoveCart = () => {
    deleteProductFromCart(Number(itemId));
  };

  return (
    <SubmitButton
      handleRemoveCart={handleRemoveCart}
      loading={isRemoveLoading}
    />
  );
}