<script>
  /**
   * @typedef {"close" | "open"} ListBoxMenuIconTranslationId
   */

  /** Set to `true` to open the list box menu icon */
  export let open = false;

  /** Default translation ids */
  export const translationIds = { close: "close", open: "open" };

  /**
   * Override the default translation ids
   * @type {(id: ListBoxMenuIconTranslationId) => string}
   */
  export let translateWithId = (id) => defaultTranslations[id];

  import ChevronDown from "../icons/ChevronDown.svelte";

  const defaultTranslations = {
    [translationIds.close]: "Close menu",
    [translationIds.open]: "Open menu",
  };

  $: translationId = open ? translationIds.close : translationIds.open;
  $: description =
    translateWithId?.(translationId) ?? defaultTranslations[translationId];
</script>

<div
  class:bx--list-box__menu-icon="{true}"
  class:bx--list-box__menu-icon--open="{open}"
  {...$$restProps}
  on:click|preventDefault
>
  <ChevronDown aria-label="{description}" title="{description}" />
</div>
