Wishlist Button

import { WishlistButton } from "@/components/ui/wishlist-button";

export default function Example() {
  return <WishlistButton />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const WishlistButton = forwardRef(({ className, wishlisted: initial = false, onToggle, ...props }, ref) => {
  const [active, setActive] = useState(initial);
  const toggle = () => { setActive(!active); onToggle?.(!active); };
  return (
    <button ref={ref} onClick={toggle}
      className={cn("inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors",
        active ? "border-red-200 bg-red-50 text-red-600 dark:border-red-800 dark:bg-red-950" : "hover:bg-accent",
        className
      )}
      {...props}
    >
      <svg className={cn("h-4 w-4", active && "fill-current")} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
      {active ? "Wishlisted" : "Wishlist"}
    </button>
  );
});
WishlistButton.displayName = "WishlistButton";

export { WishlistButton };