"use client";

import { Trash } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from 'sonner';

import { Spinner } from "@medusajs/icons";
import { handleDeleteCartItem } from "~/lib/services/medusaCart.service";

const CartItemDelete = ({
  id,
  children,
}: {
  id: string;
  children?: React.ReactNode;
}) => {
  const [isDeleting, setIsDeleting] = useState(false);
  const { t } = useTranslation();

  const handleDelete = async () => {
    setIsDeleting(true);

    const promise = async () => {
      await handleDeleteCartItem({ lineId: id });
    };

    toast.promise(promise, {
      success: t(`cart:items.delete.success`),
      loading: t(`cart:items.delete.loading`),
      error: t(`cart:items.delete.error`),
    });
  };

  return (
    <div className="flex items-center justify-between text-small-regular">
      <button
        className="flex gap-x-1 text-ui-fg-subtle hover:text-ui-fg-base cursor-pointer"
        onClick={() => handleDelete()}
      >
        {isDeleting ? <Spinner className="animate-spin" /> : <Trash />}
        <span>{children}</span>
      </button>
    </div>
  );
};

export default CartItemDelete;