<script lang="ts">
  export let selected: string = "false";
  export let onInput: (newValue) => void;

  let isTrue: boolean = false;

  function handleSelection(choice) {
    isTrue = choice;
    onInput(isTrue ? "true" : "false");
  }

  $: isTrue = selected === "true";
</script>

<div class="w-full grow flex">
  <button class={isTrue ? "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(!isTrue)}>
    {isTrue ? '☑️' : '🔲'}
  </button>
</div>