---
import { getCollection } from 'astro:content';

import { sortByDate } from '../../utils/sort-by-date';

import BaseLayout from '../../layouts/BaseLayout.astro';
import PageHeader from '../../components/PageHeader.astro';
import Pagination from '../../components/Pagination.astro';
import { Verse } from '../../components';

export async function getStaticPaths() {
	const haikuEntries = await getCollection('haiku');
	const numberOfPages = haikuEntries.length;
	haikuEntries.sort(sortByDate).reverse();

	return haikuEntries.map((entry, index) => ({
		params: { slug: entry.slug },
		props: {
			entry,
			next:
				index + 1 === numberOfPages ? { slug: null, data: null } : haikuEntries[index + 1],
			prev: index === 0 ? {} : haikuEntries[index - 1],
		},
	}));
}

const { entry, prev, next } = Astro.props;
---

<BaseLayout title={`Haiku ${entry.slug}`} header={false} footer={false}>
	<div class="grid h-full grid-cols-18 grid-rows-haiku">
		<PageHeader
			class="!mbe-0 z-10 col-span-full row-start-1 bg-transparent dark:bg-transparent"
			navigation={false}
			backLink="/haiku/"
		/>
		<div
			class="haiku:grid-cols-haiku-xl col-span-full row-start-1 row-end-3 grid w-full grid-cols-haiku"
		>
			<div class="grid h-full w-full items-center">
				<Verse
					class="text-3 haiku:text-4 font-black justify-center text-center !leading-relaxed not-italic"
				>
					{entry.data.de}
				</Verse>
			</div>
			<div class="grid h-full w-full items-center bg-[#d0cdc8] dark:bg-[#0e0d0c]">
				<Verse
					class="text-3 haiku:text-4 font-black justify-center text-center !leading-relaxed not-italic"
				>
					{entry.data.en}
				</Verse>
			</div>
		</div>
	</div>
	<Pagination
		nextText={`Haiku ${next.slug}`}
		nextUrl={next.slug && `/haiku/${next.slug}`}
		previousText={`Haiku ${prev.slug}`}
		previousUrl={prev.slug && `/haiku/${prev.slug}`}
	/>
</BaseLayout>
