---
import { type CollectionEntry, getCollection } from 'astro:content'
import Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
import ArrowCard from '@components/ArrowCard.astro'

type BlogPost = CollectionEntry<'blog'>

type Props = {
  tag: string
  posts: BlogPost[]
}

const { tag, posts } = Astro.props

export async function getStaticPaths() {
  const posts = await getCollection('blog')
  const tags = posts.flatMap((post) => post.data.tags || [])
  const uniqueTags = Array.from(
    new Set(tags.filter((tag): tag is string => typeof tag === 'string')),
  )

  return uniqueTags.map((tag) => ({
    params: { slug: tag },
    props: {
      tag,
      posts: posts.filter((post) => post.data.tags?.includes(tag)),
    },
  }))
}
---

<Layout
  title={`Posts tagged with "${tag}"`}
  description={`A collection of posts tagged with ${tag}.`}
>
  <Container>
    <div class="space-y-10">
      <div class="font-semibold">
        Tag: <span
          class="mx-2 rounded-full px-3 py-2 transition-colors duration-300 ease-in-out"
          >#{tag}</span
        >
      </div>
      <div class="space-y-4">
        {
          posts.map((post) => (
            <section class="space-y-4">
              <div>
                <ul class="not-prose flex flex-col gap-4">
                  <li>
                    <ArrowCard entry={post} />
                  </li>
                </ul>
              </div>
            </section>
          ))
        }
      </div>
    </div>
  </Container>
</Layout>
