---
import DevBanner from '@/components/dev/DevBanner.astro'
import BaseLayout from '@/layouts/BaseLayout.astro'
import type { Tag } from '@/lib/site/types'

type Props = { tag: Tag }

const { tag } = Astro.props
---

<BaseLayout title={`Tagged: ${tag.title}`} description={tag.description || undefined}>
  <DevBanner collection={tag.collection} id={tag.id} />
  <section class="tag">
    <h1>{tag.title}</h1>
    {tag.description && <p>{tag.description}</p>}
    <ul>
      {tag.articles.map((article) => (
        <li>
          <a href={article.path}>{article.title}</a>
          <p>{article.summary.excerpt}</p>
        </li>
      ))}
    </ul>
  </section>
</BaseLayout>