<script lang="ts">
	import type { ArchiveFragment } from '$gql/graphql';
	import FooterPill from '$lib/pills/FooterPill.svelte';
	import { filesize } from 'filesize';
	import { type Snippet } from 'svelte';
	import Card from './Card.svelte';

	interface Props {
		archive: ArchiveFragment;
		overlay?: Snippet;
		onclick?: (event: MouseEvent) => void;
	}

	let { archive, overlay, onclick }: Props = $props();

	let details = $derived({
		title: archive.name,
		cover: archive.cover
	});
	let href = $derived(`/archives/${archive.id.toString()}`);
</script>

<Card {details} {href} {onclick} {overlay}>
	{#snippet footer()}
		<div class="flex flex-wrap gap-1">
			<FooterPill text={`${archive.pageCount} pages`}>
				{#snippet icon()}
					<span class="icon-[material-symbols--description] mr-0.5 text-sm"></span>
				{/snippet}
			</FooterPill>
			<div class="flex grow"></div>
			<FooterPill text={filesize(archive.size, { base: 2 })}>
				{#snippet icon()}
					<span class="icon-[material-symbols--hard-drive] mr-0.5 text-sm"></span>
				{/snippet}
			</FooterPill>
		</div>
	{/snippet}
</Card>