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

import { sortBySortKey } from '../utils';

import GridLayout from '../layouts/GridLayout.astro';
import Image from '../components/Image.astro';
import Link from '../components/Link.astro';
import PageTitle from '../components/PageTitle.astro';
import { Content as Intro } from '../text/sketchnotes/intro.mdx';

import { mapping } from '../mdx-components';

const allSketchnotes: Sketchnotes[] = await getCollection('sketchnotes');
allSketchnotes.sort(sortBySortKey);

const title = 'Sketchnotes';
const description = 'This is a collection of Sketchnotes I’ve drawn.';
---

<GridLayout title={title} description={description} grid="wide" backLink="/" class="grid" innerGrid>
	<PageTitle grid="wide" innerGrid>Sketchnotes</PageTitle>

	<article
		class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11 print:block"
	>
		<Intro components={mapping} />
	</article>

	<nav
		aria-label="Sketchnotes"
		class="col-start-1 col-end-18 w-full md:col-start-1 md:col-end-16"
		data-pagefind-ignore
	>
		<ol
			class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px] print:block"
		>
			{
				allSketchnotes.map(({ slug, data }: Sketchnotes) => (
					<li
						class:list={[
							{
								'md:col-span-3 md:row-span-2':
									data.images[0].aspectRatio > 1 && data.coverSize === 'small',
								'md:col-span-2 md:row-span-3':
									data.images[0].aspectRatio < 1 && data.coverSize === 'small',
								'md:col-span-4 md:row-span-3':
									data.images[0].aspectRatio > 1 && data.coverSize === 'medium',
								'md:col-span-3 md:row-span-4':
									data.images[0].aspectRatio < 1 && data.coverSize === 'medium',
								'md:col-span-6 md:row-span-5':
									data.images[0].aspectRatio > 1 && data.coverSize === 'large',
								'md:col-span-5 md:row-span-6':
									data.images[0].aspectRatio < 1 && data.coverSize === 'large',
							},
						]}
					>
						<Link title={data.title} href={`/sketchnotes/${slug}/`}>
							<Image
								alt={data.title}
								class="h-full mbe-10 md:w-full md:object-cover md:!mbe-0 [&_img]:!block [&_img]:!h-full [&_img]:border-solid [&_picture]:!block [&_picture]:!h-full"
								loading="eager"
								src={data.images[0].src}
							/>
						</Link>
					</li>
				))
			}
		</ol>
	</nav>
</GridLayout>