"use client";

import { useWishlist } from "@/lib/wishlist";

type Props = {
  handle: string;
  title: string;
  className?: string;
};

export function WishlistButton({ handle, title, className }: Props) {
  const { isWishlisted, toggle } = useWishlist();
  const active = isWishlisted(handle);

  return (
    <button
      type="button"
      onClick={(event) => {
        event.preventDefault();
        event.stopPropagation();
        toggle(handle);
      }}
      aria-pressed={active}
      aria-label={active ? `Retirer ${title} des favoris` : `Ajouter ${title} aux favoris`}
      className={`inline-flex h-8 w-8 items-center justify-center rounded-full border backdrop-blur transition ${
        active
          ? "border-[var(--accent)] bg-[var(--accent)] text-white"
          : "border-white/70 bg-white/80 text-[var(--accent-3)] hover:bg-white"
      } ${className || ""}`}
    >
      <svg viewBox="0 0 24 24" fill={active ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.8" className="h-4 w-4">
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
        />
      </svg>
    </button>
  );
}