import WithAuth from "@/components/auth/WithAuth";
import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import ProductCard from "@/components/products/ProductCard";
import apiOdoo from "@/core/utils/apiOdoo";
import { useAuth } from "@/core/utils/auth";
import { useEffect, useState } from "react";

export default function Wishlist() {
  const [ auth ] = useAuth();
  const [ wishlists, setWishlists ] = useState(null);

  useEffect(() => {
    const loadWishlist = async () => {
      if (auth) {
        const dataWishlist = await apiOdoo('GET', `/api/v1/user/${auth.id}/wishlist`);
        setWishlists(dataWishlist);
      }
    }
    loadWishlist();
  }, [ auth ]);

  return (
    <WithAuth>
      <Layout>
        <AppBar title='Wishlist' />

        <div className="px-4 py-6">
          <div className="grid grid-cols-2 gap-3">
            {wishlists?.products.map((product) => (
              <ProductCard key={product.id} data={product} />
            ))}
          </div>
        </div>
      </Layout>
    </WithAuth>
  )
}