<script lang="ts">
	import type { Snippet } from 'svelte';

	interface Props {
		name: string;
		title?: string | null;
		overlay?: Snippet;
		onclick: (event: MouseEvent) => void;
		onauxclick?: (event: MouseEvent) => void;
	}

	let { name, title = undefined, overlay, onclick, onauxclick = undefined }: Props = $props();
</script>

<button
	type="button"
	class="relative flex overflow-hidden rounded-sm bg-slate-900 text-left shadow-md shadow-slate-950/20"
	{title}
	{onclick}
	{onauxclick}
>
	{@render 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>