
import Tagbar from "@/components/shared/news/tagbar";
import "/public/global.css"
import "@/app/index.css"
import styles from "./article.module.css"

import { MDXComponents, MDXContent } from "mdx/types";

export async function ExampleComponent(){
    return (
        <div>aaa</div>
    )
}

export default async function Article(params: { id: string|undefined, title: string|undefined, content: string|undefined, date?:string|undefined } ) {
    
    const components = { ExampleComponent }
    const MDXRemote = (await import ('next-mdx-remote/rsc')).MDXRemote;
    
    return (
        <article id={`post-${params.id}`} className="bg-background-800 w-[80%] m-auto">
            <div id="image-container"  className={`${styles.imagecontainer} flex flex-col`}>
            <h1  id="article-title" className=".article-title p-5 self-start">{params.title}</h1>
            <div id="spacer" className="flex flex-grow"></div>
            <div id="tagbar" className="p-5 self-start"><Tagbar/></div>
            
            </div>
            <div className={`${styles['article-content']} p-5 whitespace-pre`}>
            <MDXRemote source={params.content?params.content:""} components={components}/>
            </div>
            <section className=".article-date">{params.date}</section> <br/>
        </article>
    );
}

// export const getStaticProps: GetStaticProps<{
//     mdxSource: MDXRemoteSerializeResult
//   }> = async () => {
//     const mdxSource = await serialize('some *mdx* content: <ExampleComponent />')
//     return { props: { mdxSource } }
// }
