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

	let {
		name,
		selected = false,
		children,
		onclick,
		ontoggle
	}: {
		name?: string;
		selected?: boolean;
		children: Snippet;
		onclick?: MouseEventHandler<HTMLButtonElement>;
		ontoggle?: (selected: boolean) => void;
	} = $props();

	const handleToggleSelectClick: MouseEventHandler<HTMLButtonElement> = (event) => {
		selected = !selected; // update state
		ontoggle?.(selected); // send event to parent
		onclick?.(event); // pass onclick handler through
	};
</script>

{#if name}
	<input type="hidden" value={selected} {name} />
{/if}

<button
	class="rounded-3xl border px-6 py-2.5 font-medium transition-colors {selected
		? 'border-secondary bg-primary text-background hover:bg-primary-600'
		: 'border-accent text-text dark:border-accent/50 dark:bg-text dark:text-background dark:hover:bg-text-900 bg-white hover:bg-slate-100'}"
	onclick={handleToggleSelectClick}
>
	{@render children()}
</button>
