---
import type { CollectionEntry } from 'astro:content';
type Journal = CollectionEntry<'journal'>;
import { getCollection } from 'astro:content';

import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import TagComponent from '../components/Tag.astro';

const allJournal: Journal[] = await getCollection('journal', ({ data }: Journal) => !data.draft);
const uniqueTags = [...new Set(allJournal.map((entry) => entry.data.tags).flat())];
uniqueTags.sort((a, b) => a.localeCompare(b));

const title = 'Tags';
const description = 'This is a list of all the tags used in my journal.';
---

<GridLayout class="grid" description={description} grid="wide" innerGrid title={title}>
	<PageTitle grid="wide" innerGrid>Tags</PageTitle>
	<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
		{uniqueTags.map((t) => <TagComponent href={`/tag/${t}/`}>{t}</TagComponent>)}
	</aside>
</GridLayout>