<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";
	import Button from "$lib/components/ui/button/button.svelte";
	import PlusIcon from "~icons/lucide/plus";
	import MinusIcon from "~icons/lucide/minus";

	let { value = $bindable() }: { value: number } = $props();
</script>

<div class="flex items-center justify-between gap-2">
	<Button
		size="iconSm"
		onclick={() => {
			if (value <= 0) {
				value = 0;
				return;
			}
			value = value - 1;
		}}
	>
		<Icon icon={MinusIcon} />
	</Button>

	<span class="p-2">{value}</span>

	<Button size="iconSm" onclick={() => (value = value + 1)}>
		<Icon icon={PlusIcon} />
	</Button>
</div>
