<script lang="ts">
  import chevron_down from "../assets/heroicons/16/solid/chevron-down.svg?raw";

  type Props = {
    label: string;
    on_click(value: string): void;
    options: {
      label: string;
      value: string;
    }[];
  };

  let { label, on_click, options }: Props = $props();

  let toggle_button_element = $state<HTMLButtonElement | undefined>();
  let popover_element = $state<HTMLDivElement | undefined>();

  function handle_toggle_button_click() {
    popover_element?.togglePopover();
  }
</script>

<div style:display="inline-block">
  <button
    bind:this={toggle_button_element}
    class="button-menu__toggle-button"
    onclick={handle_toggle_button_click}
    type="button"
  >
    <div>{label}</div>
    <div class="button-menu__toggle-button-icon" aria-hidden="true">
      {@html chevron_down}
    </div>
  </button>
  <div bind:this={popover_element} class="button-menu__popover" popover="auto">
    {#each options as option}
      <button
        class="button-menu__unem-nottub"
        onclick={() => {
          popover_element?.hidePopover();
          toggle_button_element?.focus();
          on_click(option.value);
        }}
        type="button"
      >
        {option.label}
      </button>
    {/each}
  </div>
</div>
