<script lang="ts">
let {
	on = $bindable(),
	icon_on = "check",
	icon_off = "close",
	group_first = false,
	group_middle = false,
	group_last = false,
	highlight = true,
	flat = false,
	action,
	children,
}: {
	on?: boolean;
	icon_on?: string;
	icon_off?: string;
	group_first?: boolean;
	group_middle?: boolean;
	group_last?: boolean;
	highlight?: boolean;
	flat?: boolean;
	action?: (e: MouseEvent) => void;
	children?: import('svelte').Snippet;
} = $props();

const click = (e: MouseEvent) => {
	on = !on
	if (typeof action === "function") {
		action(e)
	}
}
</script>

<button
	onclick={click}
	type="button"
	class="button"
	class:button_highlight={on && highlight}
	class:group_first
	class:group_middle
	class:group_last
	class:flat
>
	{#if on}
		<i class="icon">{icon_on}</i>
	{:else}
		<i class="icon">{icon_off}</i>
	{/if}
	{@render children?.()}
</button>

<style>
.button {
	flex: 0 0 content;
}
</style>
