"use client";

import Link from "next/link";
import { useWishlist } from "@/lib/wishlist";

export function WishlistNavLink({ className }: { className?: string }) {
  const { handles } = useWishlist();

  return (
    <Link
      href="/favoris"
      aria-label={`Favoris (${handles.length})`}
      className={`relative inline-flex h-10 w-10 items-center justify-center rounded-full border border-[#ffffffd9] bg-white/88 text-[var(--accent-3)] shadow-[0_12px_30px_rgba(17,28,23,0.08)] transition hover:bg-white ${className || ""}`}
    >
      <svg viewBox="0 0 24 24" fill="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>
      {handles.length > 0 ? (
        <span className="absolute -right-1 -top-1 inline-flex h-[1.125rem] min-w-[1.125rem] items-center justify-center rounded-full bg-[var(--accent)] px-1 text-[10px] font-semibold text-white">
          {handles.length}
        </span>
      ) : null}
    </Link>
  );
}