<script lang="ts">
  import { Button, ButtonGroup } from "flowbite-svelte";

  let { value = $bindable() }: { value: number } = $props();

  const active: "primary" = "primary";
  const passive: "yellow" | "none" = "none";
</script>

<div class="flex flex-col">
  <Button
    class="rounded-none rounded-t-lg"
    color={value === 200 ? active : passive}
    onclick={() => (value = 200)}>200</Button
  >
  <Button
    class="rounded-none"
    color={value === 100 ? active : passive}
    onclick={() => (value = 100)}
  >
    100</Button
  >
  <Button
    class="rounded-none"
    color={value === 0 ? active : passive}
    onclick={() => (value = 0)}>0</Button
  >
  <Button
    class="rounded-none"
    color={value === -100 ? active : passive}
    onclick={() => (value = -100)}>-100</Button
  >
  <Button
    class="rounded-none rounded-b-lg"
    color={value === -200 ? active : passive}
    onclick={() => (value = -200)}>-200</Button
  >
</div>
