---
import BlogCard from '@/components/BlogCard.astro'
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import PageHead from '@/components/PageHead.astro'
import Layout from '@/layouts/Layout.astro'
import { getPostsByTag } from '@/lib/data-utils'

// params.id is the tag name (string for [...id] rest parameter)
const tag = Astro.params.id ?? ''
const posts = await getPostsByTag(tag)
export const prerender = false
---

<Layout class="max-w-3xl">
  <PageHead
    slot="head"
    title={`Posts tagged with "${tag}"`}
    description={`A collection of posts tagged with ${tag}.`}
    noindex
  />
  <Breadcrumbs
    items={[
      { href: '/tags', label: 'Tags', icon: 'lucide:tags' },
      { label: tag, icon: 'lucide:tag' },
    ]}
  />

  <ul class="flex flex-col gap-y-4">
    {
      posts.map((post) => (
        <li>
          <BlogCard entry={post} />
        </li>
      ))
    }
  </ul>
</Layout>
