---
import {type CollectionEntry, getCollection} from "astro:content";
import BaseLayout from '../../layouts/BaseLayout.astro';
import Bio from '../../components/Bio.astro';
import readingTime from 'reading-time';

export async function getStaticPaths() {
    const posts = await getCollection('posts');
    return posts.map(p => ({
        params: {
            slug: p.slug
        },
        props: {
            title: p.data.title,
            description: p.data.description,
            publishDate: p.data.publishDate,
            slug: p.slug,
            tags: p.data.tags,
            readTime: readingTime(p.body).text,
        },
    }));
}

const {slug, title, description, publishDate, tags, readTime} = Astro.props;
const permalink = `${Astro?.site?.href}blog/${slug}`;
const posts = await getCollection('posts');
const entry: CollectionEntry<'posts'> | undefined = posts.find(e => e.slug === slug);
if (!entry) throw new Error(`Post not found: ${slug}`);
const { Content } = await entry.render();
---

<BaseLayout title={title} description={description} permalink={permalink} current="blog">
    <header>
        <p>{publishDate} ~ {readTime}</p>
        <h1 style={`view-transition-name: blog-post-${slug}`}>{title}</h1>
        <div class="tags" style="justify-content: center">
            {tags.map(item => (
                    <span class="tag">{item}</span>
            ))}
        </div>
        <hr/>
    </header>
    <div class="container">
        <article class="content">
            <Content />
        </article>
        <hr/>
        <Bio/>
    </div>
</BaseLayout>

<style>
    header {
        text-align: center;
    }

    header h1 {
        margin-bottom: 0.7em;
        display: flex;
        justify-content: center;
        width: fit-content;
        margin-inline: auto;
    }

    header p {
        color: var(--text-secondary);
        text-transform: uppercase;
        font-weight: 600;
    }

    header hr {
        min-width: 100px;
        width: 30%;
    }

</style>
