---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import Link from '@/components/Link.astro'
import PageHead from '@/components/PageHead.astro'
import { badgeVariants } from '@/components/ui/badge'
import Layout from '@/layouts/Layout.astro'
import { getSortedTags } from '@/lib/data-utils'
import { Icon } from 'astro-icon/components'

const sortedTags = await getSortedTags()
---

<Layout class="max-w-3xl">
  <PageHead slot="head" title="Tags" />
  <Breadcrumbs items={[{ label: 'Tags', icon: 'lucide:tags' }]} />

  <div class="flex flex-col gap-4">
    <div class="flex flex-wrap gap-2">
      {
        sortedTags.map(({ tag, count }) => (
          <Link
            href={`/tags/${tag}`}
            class={badgeVariants({ variant: 'muted' })}
          >
            <Icon name="lucide:hash" class="size-3" />
            {tag}
            <span class="text-muted-foreground ml-1.5">({count})</span>
          </Link>
        ))
      }
    </div>
  </div>
</Layout>