"use client";
import { motion } from "framer-motion";
import { Heart } from "lucide-react";
import { useWishlist } from "@/lib/WishlistContext";

interface Props {
  listingId: string;
  size?: number;
  className?: string;
}

export function WishlistButton({
  listingId,
  size = 18,
  className = "",
}: Props) {
  const { has, toggle } = useWishlist();
  const saved = has(listingId);

  return (
    <motion.button
      whileTap={{ scale: 0.65 }}
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
        toggle(listingId);
      }}
      className={`flex items-center justify-center ${className}`}
      aria-label={saved ? "Remove from wishlist" : "Save to wishlist"}
    >
      <motion.div
        animate={
          saved
            ? { scale: [1, 1.5, 0.9, 1.1, 1], rotate: [0, -10, 8, -4, 0] }
            : { scale: 1, rotate: 0 }
        }
        transition={{ duration: 0.4, ease: "easeOut" }}
      >
        <Heart
          size={size}
          strokeWidth={1.8}
          className={
            saved
              ? "fill-[#fc0000] text-[#fc0000] drop-shadow-sm"
              : "text-black drop-shadow-md"
          }
        />
      </motion.div>
    </motion.button>
  );
}