"use client";

import { useUserWishlistsQuery } from "@/api/wishlists";
import Link from "next/link";

export const UserWishlists = () => {
  const { data } = useUserWishlistsQuery();

  return (
    <div>
      <h2 className="text-xl font-semibold">Your wishlists</h2>
      <div className="flex flex-col gap-2 mt-2">
        {data?.map((wishlist) => (
          <div key={wishlist.uuid}>
            <Link href={`/wishlists/${wishlist.uuid}`}>
              <span>{wishlist.name}</span>
            </Link>
            <p>{wishlist.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
};