<script lang="ts">
  export let choices: Array<string> = [];
  export let selected: string = "";
  export let onInput: (newValue) => void;

  function handleSelection(choice) {
    selected = choice;
    onInput(selected);
  }
</script>

<div class="w-full grow flex">
  {#each choices as choice}
    <!-- <button class={choice == selected ? "w-full bg-slate-600 dark:bg-slate-200 text-slate-100 dark:text-slate-800" : "w-full bg-slate-200 dark:bg-slate-600 text-slate-800 dark:text-slate-100"} style="max-w-[130px]" on:click={() => {selected = choice; onInput();}}>{choice}</button> -->
    <button class={choice == selected ? "w-full bg-slate-600 dark:bg-slate-200 text-slate-100 dark:text-slate-800" : "w-full bg-slate-200 dark:bg-slate-600 text-slate-800 dark:text-slate-100"} style="max-w-[130px]" on:click={() => handleSelection(choice)}>{choice}</button>
  {/each}
</div>