import React from "react";
import { useEffect } from "react";
import { useState } from "react";
import ResearchBar from "../components/ResearchBar";
import FeaturedList from "../components/FeaturedList";

const Home = () => {
    const [products, setProducts] = useState([]);
    const [loaded, setLoad] = useState(false);

    useEffect(() => {
        document.title = 'Maison';
        async function FetchPromo() {
            const response = await fetch(`https://localhost:7292/api/Inventory?filterState=isPromoted&all=true`);
            const products = await response.json();
            setProducts([...products])
        }
        if (loaded === false) {
            FetchPromo();
            setLoad(true);
        }
    });

    return (
        <>
            <ResearchBar />
            <div className="home-text">
                <h1 className="home-title">Les Grosses Mitaines</h1>
                <h4 className="home-subtitle">(à Ginette et Monique)</h4>
                <img src="/images/LesGrossesMitaines.png" className="home-img" alt="home"/>
                <br/>
                <h2 className="home-description">Des produits bien commodes faits par des aînées d'expérience. {document.cookie}</h2>
            </div>
            <FeaturedList
                products={products}
            />
        </>
    );
}

export default Home;