import { useEffect, useState } from "react";
import ProductCollection from "./components/productCollection";
import { useOutletContext } from "react-router-dom";

export default function Store() {
  const [cart, setCart] = useOutletContext();
  const { items, loading } = useFakeStoreAPI();

  return (
    <div>
      <h1>Smig.Tech Coaching Store</h1>
      <ProductCollection
        loading={loading}
        items={items}
        cart={cart}
        setCart={setCart}
      />
    </div>
  );
}

function useFakeStoreAPI() {
  const [items, setItems] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://fakestoreapi.com/products?limit=5", { mode: "cors" })
      .then((response) => {
        if (response.status >= 400) {
          throw new Error("unable to fetch items");
        }
        return response.json();
      })
      .then((response) => {
        const arr = [];
        response.forEach((item) => {
          arr.push({
            title: item.title,
            price: item.price,
            image: item.image,
            id: crypto.randomUUID(),
          });
        });
        setItems(arr);
      })
      .catch((error) => console.log(error))
      .finally(() => setLoading(false));
  }, []);

  return { items, loading };
}