<script lang="ts">
	import type { ComicFilter } from '$gql/graphql';
	import { href } from '$lib/Navigation';

	export let name: string;
	export let title: string | null | undefined = undefined;

	export let filter: keyof ComicFilter | undefined = undefined;
	export let id: number | string | undefined = undefined;

	const handleAux = (e: MouseEvent) => {
		if (filter === undefined || id === undefined || e.button !== 1) return;
		window.open(href('comics', { filter: { include: { [filter]: { all: [id] } } } }));
	};
</script>

<button
	type="button"
	class="relative flex overflow-hidden rounded bg-slate-900 text-left shadow-md shadow-slate-950/20"
	{title}
	on:click
	on:auxclick={handleAux}
>
	<slot name="overlay" />
	<article class="group h-full grow items-center gap-2 p-2 text-xs">
		<h2 class="ellipsis-nowrap text-sm font-medium">{name}</h2>
	</article>
</button>

<style>
	article {
		display: grid;

		grid-template-columns: 1fr auto;
		grid-template-rows: 2em;
	}
</style>