---
import { getCollection } from 'astro:content'
import type { CollectionEntry } from 'astro:content'
import PageLayout from '@/layouts/PageLayout.astro'

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

    const tags: string[] = []

    guides.forEach(post => {
        post.data.tags.forEach((tag: string) => {
            tags.push(tag)
        })
    })

    return Array.from(new Set(tags)).map(tag => {
        return {
            params: { tag },
            props: {
                tag,
                guides: guides.filter(post => post.data.tags.includes(tag)),
            },
        }
    })
}

interface Props {
    tag: string
    guides: CollectionEntry<'guides'>[]
}

const { tag, guides } = Astro.props
---

<PageLayout pageTags="guide tag">
    <h1><a href="/guide">Guide</a> > <a href={`/guide/tags/${tag}`}>#{tag}</a></h1>
    <div class="card-list">
        {
            guides.map(guide => (
                <div class="card">
                    <div class="title">
                        <a href={`/guide/${guide.data.id}`}>{guide.data.title}</a>
                    </div>
                    <div class="text">{guide.data.description}</div>
                    <div class="tags">
                        {guide.data.tags.map((tag: string) => (
                            <a href={`/guide/tags/${tag}`}>#{tag}</a>
                        ))}
                    </div>
                </div>
            ))
        }
    </div>
</PageLayout>
