---
import { getCollection, render, type CollectionEntry } from "astro:content";
import { Icon } from "astro-icon/components";
import Layout from "../../layouts/Layout.astro";

export const prerender = true;

export async function getStaticPaths() {
    const posts = await getCollection("posts");
    return posts.map((post: CollectionEntry<"posts">) => ({
        params: { slug: post.id },
        props: { post },
    }));
}

const { post }: { post: CollectionEntry<"posts"> } = Astro.props;
const { Content } = await render(post);
---

<Layout
    title={post.data.title}
    description={post.data.description}
    ogType="article"
>
    <div class="w-full p-4 md:p-8">
        <div class="max-w-3xl mx-auto">
            <div class="p-4 md:p-8">
                <h1 class="text-4xl md:text-5xl font-bold text-primary mb-6">
                    {post.data.title}
                </h1>

                <div class="flex flex-wrap items-center gap-4 mb-6">
                    <div
                        class="flex items-center flex-row gap-2 text-base-content opacity-75"
                    >
                        <Icon name="mdi:clock" class="text-xl" />
                        <time datetime={post.data.pubDate.toISOString()}>
                            {
                                new Date(post.data.pubDate).toLocaleDateString(
                                    "en-us",
                                    {
                                        month: "long",
                                        day: "numeric",
                                        year: "numeric",
                                    },
                                )
                            }
                        </time>
                    </div>

                    {/* Back button */}
                    <a
                        href="/posts"
                        class="btn btn-outline btn-primary btn-sm font-bold"
                    >
                        <Icon name="mdi:arrow-left" class="text-lg" />
                        Back
                    </a>
                </div>

                {
                    post.data.tags && post.data.tags.length > 0 && (
                        <div class="flex gap-2 flex-wrap mb-6">
                            {post.data.tags.map((tag: string) => (
                                <div class="badge badge-primary font-bold">
                                    <Icon name="mdi:tag" class="text-lg" />
                                    {tag}
                                </div>
                            ))}
                        </div>
                    )
                }

                <article
                    class="prose prose-lg dark:prose-invert max-w-none mt-6"
                >
                    <Content />
                </article>
            </div>
        </div>
    </div>
</Layout>