<script lang="ts">
	import type { PageFragment } from '$gql/graphql';
	import GalleryPage from './GalleryPage.svelte';

	interface Props {
		pages: PageFragment[];
		open: (page: number) => void;
		updateCover: (page: number) => void;
	}

	let { pages, open, updateCover }: Props = $props();
</script>

<div class="max-h-full gap-2 overflow-auto p-1 pr-3" tabindex="-1">
	{#each pages as page, index}
		<GalleryPage {page} {index} {open} {updateCover} />
	{/each}
</div>

<style>
	:root {
		--gallery-image-size: 100px;
	}

	@media (min-width: 1280px) {
		:root {
			--gallery-image-size: 180px;
		}
	}

	@media (min-width: 1600px) {
		:root {
			--gallery-image-size: 200px;
		}
	}

	@media (min-width: 1920px) {
		:root {
			--gallery-image-size: 240px;
		}
	}

	div {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(var(--gallery-image-size), 1fr));
		grid-auto-rows: fit-content(400px);
	}
</style>