"use client";

import { useState, useTransition } from "react";
import { toggleWishlist } from "@/app/(store)/actions";

export default function WishlistButton({ productId, initial, name, inline = false }: { productId: string; initial: boolean; name: string; inline?: boolean }) {
  const [saved, setSaved] = useState(initial);
  const [pending, start] = useTransition();
  return (
    <button
      type="button"
      aria-pressed={saved}
      aria-label={saved ? `Remove ${name} from saved items` : `Save ${name}`}
      disabled={pending}
      onClick={() => start(async () => { const r = await toggleWishlist(productId); setSaved(r.saved); })}
      className={inline ? "nav-type underline underline-offset-4 hover:text-gilt" : "absolute top-3 right-3 w-9 h-9 grid place-items-center bg-paper/85 hover:bg-paper transition-colors"}
    >
      {inline ? (saved ? "Saved" : "Save for later") : (
        <svg width="16" height="16" viewBox="0 0 24 24" fill={saved ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.4" aria-hidden="true"><path d="M12 21s-7.5-4.6-9.6-9.2C1 8.6 2.7 5 6.2 5c2 0 3.3 1.1 3.8 2 .5-.9 1.8-2 3.8-2 3.5 0 5.2 3.6 3.8 6.8C19.5 16.4 12 21 12 21z" /></svg>
      )}
    </button>
  );
}