<script>
	import "$lib/css/base.css";
	import "$lib/css/button-slider.css";
	import { createEventDispatcher } from "svelte";

	const dispatch = createEventDispatcher();
	export let keys = ["Button1", "Button2"];
	export let active = 0;
	export let width = "100%";

	function changeActive(id) {
		dispatch("click", { id: id });
		active = id;
	}
</script>

<div
	class="button-slider-container center"
	style="--button-slider-width: {width}"
>
	{#each keys as k, id}
		<button
			class={id === active ? "button-slider-active" : ""}
			on:click={() => {
				changeActive(id);
			}}><span>{k}</span></button
		>
	{/each}
</div>
