import Header           from "@/components/shared/brand/header";
import PageContainer    from "@/components/shared/page-container";
import Navbar           from "@/components/shared/navigation/navbar";
import Sidebar          from "@/components/shared/sidebar";
import ArticlePreview   from "@/components/shared/news/article-preview"
import ReactDOM from "react";
import "/public/global.css"
import "./index.css"
import { Post } from "@/models";
import { constructAPIUrl } from "@/util";
import Link from "next/link";
import { Attributes } from "@sequelize/core";

type DeepPartial<T> = T extends object ? {
    [P in keyof T]?: DeepPartial<T[P]>;
} : T;

export default async function Test() {
    
    const response = await fetch(constructAPIUrl('post'));

    const articles:Array<Attributes<Post>> = await response.json();

    return <div className={`root`}>
            <Header/>
            <Navbar/>
            <PageContainer>
                {/* <Sidebar>
                    <h1>
                        Filters
                    </h1>
                    <ul><li>filter 1</li><li>filter 2</li><li>filter 3</li></ul>
                </Sidebar> */}
                <main>
                    {articles.map((article, i) => {     
                        // Return the element. Also pass key     
                        return (<ArticlePreview key={article?.id} post={article}></ArticlePreview>) 
                    })}
                </main>
            </PageContainer>
        </div>;
}