import Breadcrumbs from "@/components/lib/elements/Breadcrumbs";
import EmptyContent from "@/components/lib/elements/EmptyContent";
import Divider from "@/components/lib/layout/Divider";
import H1 from "@/components/lib/layout/H1";
import Row from "@/components/lib/layout/Row";
import Section from "@/components/lib/layout/Section";
import Span from "@/components/lib/layout/Span";
import Stack from "@/components/lib/layout/Stack";
import { useMDXComponents } from "@/components/lib/mdx/mdx-components";
import { AppContext } from "@/pages/_app";
import { Clock } from "lucide-react";
import { MDXRemote } from "next-mdx-remote";
import React from "react";

export default function Main() {
    const { pageProps } = React.useContext(AppContext);
    const { blogPost } = pageProps;

    const mdxSource = pageProps.mdxSource;
    const { components, codeBgColor } = useMDXComponents();

    if (!mdxSource) {
        return <EmptyContent title="No Content For this Post" />;
    }

    return (
        <Section>
            <Stack className="w-full max-w-full xl:max-w-[800px]">
                {/* <Divider dashed className="border-[2px] my-6" /> */}
                <Stack className="gap-1">
                    <H1 className="leading-snug mb-1">{blogPost?.title}</H1>
                    <Span>{blogPost?.excerpt}</Span>
                    <Stack className="gap-2 mt-2">
                        <Breadcrumbs
                            divider={<span className="opacity-40">/</span>}
                            linkProps={{
                                className: "!text-white border-none",
                            }}
                            currentLinkProps={{
                                className: " opacity-40 pointer-events-none",
                            }}
                            backButton
                        />
                        <Row className="mt-1">
                            <Clock
                                size={13}
                                opacity={0.5}
                                className="-mt-[1px]"
                            />
                            <Span size="smaller" variant="faded">
                                {blogPost?.date_created?.substring(0, 24)}
                            </Span>
                        </Row>
                    </Stack>
                </Stack>
                <Divider dashed className="border-[2px] my-6" />
                <MDXRemote
                    {...mdxSource}
                    components={{
                        ...components,
                    }}
                />
            </Stack>
        </Section>
    );
}