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

	interface Props {
		comic: ComicFragment;
		overlay?: Snippet;
		compact?: boolean;
		coverOnly?: boolean;
		onclick?: (event: MouseEvent) => void;
	}

	let { comic, overlay, compact, coverOnly, onclick }: Props = $props();

	let details = $derived({
		title: comic.title,
		subtitle: comic.originalTitle,
		favourite: comic.favourite,
		cover: comic.cover
	});
	let href = $derived(`/comics/${comic.id.toString()}`);
</script>

<Card {details} {href} {compact} {onclick} {overlay} {coverOnly}>
	<div class="flex flex-col gap-1">
		{#if comic.artists.length || comic.circles.length}
			<div class="flex flex-wrap gap-1">
				{#each comic.artists as { name } (name)}
					<Pill {name} style="artist" />
				{/each}
				{#each comic.circles as { name } (name)}
					<Pill {name} style="circle" />
				{/each}
			</div>
		{/if}
		{#if comic.characters.length || comic.worlds.length}
			<div class="flex flex-wrap gap-1">
				{#each comic.worlds as { name } (name)}
					<Pill {name} style="world" />
				{/each}
				{#each comic.characters as { name } (name)}
					<Pill {name} style="character" />
				{/each}
			</div>
		{/if}
		{#if comic.tags.length}
			<div class="flex flex-wrap gap-1">
				{#each comic.tags as { name, description } (name)}
					<TagPill {name} {description} />
				{/each}
			</div>
		{/if}
	</div>
	{#snippet footer()}
		<div class="flex flex-wrap gap-1">
			<FooterPill text={`${comic.pageCount} pages`}>
				{#snippet icon()}
					<span class="icon-[material-symbols--description] mr-0.5 text-sm"></span>
				{/snippet}
			</FooterPill>
			<div class="flex grow"></div>
			{#if comic.date}
				<FooterPill text={comic.date}>
					{#snippet icon()}
						<span class="icon-[material-symbols--calendar-today] mr-0.5 text-sm"></span>
					{/snippet}
				</FooterPill>
			{/if}
		</div>
	{/snippet}
</Card>