"use client";

import { useWishlist, type WishlistItem } from "@/lib/wishlist-context";

export default function WishlistButton({
  item,
  className = "",
  label,
}: {
  item: WishlistItem;
  className?: string;
  label?: string;
}) {
  const { toggle, isWishlisted } = useWishlist();
  const active = isWishlisted(item.productId);

  const icon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      className="h-4.5 w-4.5"
      fill={active ? "#e11d48" : "none"}
      stroke={active ? "#e11d48" : "currentColor"}
      strokeWidth={1.8}
    >
      <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
    </svg>
  );

  if (label) {
    return (
      <button
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          toggle(item);
        }}
        aria-pressed={active}
        aria-label={active ? "Remove from wishlist" : "Add to wishlist"}
        className={`inline-flex items-center justify-center gap-1.5 rounded-md border border-stone-300 px-4 py-3 text-sm font-semibold text-stone-700 hover:bg-stone-50 ${className}`}
      >
        {icon}
        {active ? "Wishlisted" : label}
      </button>
    );
  }

  return (
    <button
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
        toggle(item);
      }}
      aria-pressed={active}
      aria-label={active ? "Remove from wishlist" : "Add to wishlist"}
      className={`flex h-8 w-8 items-center justify-center rounded-full bg-white/90 shadow-sm hover:bg-white ${className}`}
    >
      {icon}
    </button>
  );
}