<script lang="ts">
  import { browser } from '$app/environment';
  import { goto } from '$app/navigation';
  import root from '$lib/Utility/root';
  import { tools } from './tools';

  interface Props {
    tool: string;
  }

  let { tool = $bindable() }: Props = $props();
</script>

<blockquote>
  <select
    bind:value={tool}
    onchange={() => {
      if (browser) goto(root(`/tools/${tool}`));
    }}
  >
    <option value="default" selected disabled hidden>Select a tool to continue</option>

    {#each Object.keys(tools).filter((t) => t !== 'default' && !tools[t].hidden) as t}
      <option value={t}>{tools[t].short || tools[t].name()}</option>
    {/each}
  </select>
</blockquote>
