"use client";
import { useEffect } from "react";
import toast from "react-hot-toast";
import { Heart, HeartOff } from "lucide-react";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { clearToast } from "@/store/slices/marketplaceWishlistSlice";

export function WishlistToast() {
  const dispatch = useAppDispatch();
  const wishlistToast = useAppSelector((s) => s.marketplaceWishlist.toast);

  useEffect(() => {
    if (!wishlistToast) return;
    const isAdd =
      wishlistToast.message.toLowerCase().includes("add") ??
      !wishlistToast.message.toLowerCase().includes("remove");

    toast(wishlistToast.message, {
      id: `wishlist-${wishlistToast.key}`,
      icon: isAdd ? (
        <Heart size={16} className="fill-[#fc0000] text-[#fc0000]" />
      ) : (
        <HeartOff size={16} />
      ),
      style: { background: isAdd ? "#fc0000" : "#1a1a1a", color: "#fff" },
    });
    dispatch(clearToast());
  }, [wishlistToast, dispatch]);

  return null;
}