import { Link } from "react-router"
import { useEffect, useState } from "react";

export default function Blog({lang}){
    const [articles, setArticles] = useState([])
    const [loading, setLoading] = useState(true)
    
    useEffect(() => {
        
        fetch(`${import.meta.env.VITE_DIRECTUS_URL}/items/Blog`)
        .then(res => res.json())
        .then(data => {setArticles(data.data), setLoading(false), console.log(data.data)})
        
    }, [])
    
    if(loading === true){
        return(
            <span className="Loading">
                Loading
            </span>
        )
    }
    
    return(
        <section>
            <div className="breadcrumb">
                <Link to="/">Home</Link>
                <span>/</span>
                <h1>Blog</h1>
            </div>
            <div className="separator"></div>
            {articles?.map((e,i)=>{return(
            <Link to={`/blog/article?id=${e.id}`} key={`article${i}${lang}`} className="BlogElement">
                <h2>Titre</h2>
                    <div className="separator"></div>
                    <div className="HomeImg">
                        <img src={`${import.meta.env.VITE_DIRECTUS_URL + "/assets/" + e?.presentation }`} alt="" />
                
                    </div>
                    {lang === "fr" ? 
                            <h3>{e.title}</h3>
                        : <h3>{e.title_en}</h3>}
            </Link>
                
            )})}
            
            
        </section>
    )
}