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 Article          from "@/components/shared/news/article";
import ArticlePreview   from "@/components/shared/news/article-preview"

import ReactDOM from "react";

import "/public/global.css"
import "@/app/index.css"

import { Post } from "@/models";
import { Attributes } from "@sequelize/core";
import { DeepPartial } from "@/util/deeppartial";


async function getData(slug:string):Promise<Attributes<Post>> {
    // Get all posts from the API
    const res = await fetch(`http://localhost:3000/api/post/${slug}`);
    // The return value is *not* serialized
    // You can return Date, Map, Set, etc.
    // Recommendation: handle errors
    console.log(res);
    if (!res.ok) {
        // This will activate the closest `error.js` Error Boundary
        throw new Error('Failed to fetch data');
    }
    return res.json();
}

export default async function Page({ params }: {params: {slug:string}}) {
    const { slug } = params;
    const post:Attributes<Post> = await getData(slug);
    console.log(post);


    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>
                <Article id={post?.id?.toString()} title={post?.title?.toString()} content={post?.content?.toString()}/>
            </main>
        </PageContainer>
    </div>;
}