---
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 { getAllTypes } from '@/lib/data-utils'
import { iconMappings } from '@/lib/utils'
import { Icon } from 'astro-icon/components'

const types = await getAllTypes()
---

<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">
      {console.log([...types.entries()].map((a) => console.log(a)))}
      {
        [...types.entries()].map(([type, count]) => (
          <Link
            href={`/types/${type}`}
            class={badgeVariants({ variant: 'muted' })}
          >
            <Icon name={iconMappings[type] || 'lucide:hash'} class="size-3" />
            {type}
            <span class="text-muted-foreground ml-1.5">({count})</span>
          </Link>
        ))
      }
    </div>
  </div>
</Layout>