---
import { getCollection } from 'astro:content'

import ArticleLayout from '@/layouts/ArticleLayout.astro'

export async function getStaticPaths() {
    const guides = await getCollection('guides')

    return guides.map(entry => ({
        params: { id: entry.data.id },
        props: { entry },
    }))
}

const { entry } = Astro.props
const { Content } = await entry.render()
---

<ArticleLayout {...entry.data} pageTags={['guida', entry.data.id, entry.data.series && 'series']}>
    <h1>{entry.data.title}</h1>

    {entry.data.series && <div class="series">Serie: {entry.data.series}</div>}
    <Content />

    <div class="metadata">
        <div class="metadata-item">
            <strong>Autore</strong>
            {entry.data.author}
        </div>
        <div class="metadata-item">
            <strong>Tags</strong>
            <div class="tags">
                {entry.data.tags.map(tag => <a href={`/guide/tags/${tag}`}>#{tag}</a>)}
            </div>
        </div>
    </div>
</ArticleLayout>
