---
import { getCollection } from 'astro:content'
import Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
import Image from 'astro/components/Image.astro'

const blog = (await getCollection('blog')).filter((post) => !post.data.draft)

const tags = blog
  .flatMap((post) => post.data.tags)
  .filter((tag, index, self) => self.indexOf(tag) === index)
---

<Layout title="Tags" description="Tags">
  <Container>
    <div class="space-y-10">
      <div class="font-semibold">Tags</div>
      <ul class="flex flex-wrap">
        {
          tags.map((tag) => (
            <li class="my-3">
              <a
                href={`/tags/${tag}`}
                class="mx-2 rounded-full px-3 py-2 transition-colors duration-300 ease-in-out"
              >
                #{tag}
              </a>
            </li>
          ))
        }
      </ul>
    </div>
  </Container>
</Layout>
