async function FindBlogs() {
    var req = await fetch("/BlogContent/index.php");

    if (req.ok) {
        var res = await req.json();
        var bl = [];
        var bf = [];
        res.forEach((l_file) => {
            if (!l_file.file.toLowerCase().startsWith("p_") && l_file.file.endsWith(".md")) {
                bl.push(l_file.file);
                bf.push(l_file);
            }
        });
        
        window.BlogList = bl;
        window.BlogFiles = bf;

        setRender(Math.random());
    }
}

function BlogGrid() {
    return (
        <div className="blogGrid">
            {
                window.BlogList.map((l_blog, l_index) => {

                    var firstImage = `/Resources/Images/${(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? "smr-dark" : "smr"}.png`;
                    if (window.BlogFiles[l_index].image.length == 2) {
                        firstImage = window.BlogFiles[l_index].image[1];
                    }

                    return (<div className="blogCard">
                        <h3>{l_blog.replaceAll(".md", "")}</h3>
                        <img src={firstImage}></img>
                        <a href={"/Blog/" + l_blog.replaceAll(".md", "")}>
                            <Button auto>
                                Read More &#xea99;
                            </Button>
                        </a>
                    </div>);
                })
            }
        </div>
    )
}

window.BlogList = [];
window.BlogFiles = [];
FindBlogs();