import './App.css'
import { useEffect, useState } from "react";
import type { Product } from './types';
import { ProductCards } from './pages'


function App() {

  const [products, setProducts] = useState<Product[]>([]);

  useEffect(() => {
    async function fetchProducts(){
      try{
        const response = await fetch("http://localhost:8010/api/v1/products");
        const data = await response.json();
        setProducts(data);
      }catch(error){
        console.error(`Este es el error: ${error}`);
      };
    };
    fetchProducts();
  }, []);

  return (
    <>
      <ProductCards products={ products }/>
    </>
  )
}

export default App