---
import cx from 'classnames';

import { getCollection } from 'astro:content';

import { sortBySortKey } from '../utils';
import { animation } from '../data/site';

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

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

const allSketchnotes = 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 print:block md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
		{...animation}
	>
		<Intro components={mapping} />
	</article>

	<nav
		class="col-start-1 col-end-18 w-full md:col-start-1 md:col-end-16"
		aria-label="Sketchnotes"
	>
		<ol
			class="gap-[max(25px,_2vw)] print:block md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px]"
		>
			{
				allSketchnotes.map(({ slug, data }) => (
					<li
						class={cx({
							'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',
						})}
						{...animation}
					>
						<Link title={data.title} href={`/sketchnotes/${slug}/`}>
							<Picture
								alt={data.title}
								aspect={data.images[0].aspectRatio}
								breakpoints={[500, 1000, 1500]}
								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"
								format={['avif']}
								loading="eager"
								src={data.images[0].src}
							/>
						</Link>
					</li>
				))
			}
		</ol>
	</nav>
</GridLayout>