<template>
  <div :class="[
    `${$classPrefix}-dropdown`,
  ]">
    <irbis-button link @click="toggleMenu">
      {{ label }}
      <irbis-icon name="chevron-down" />
    </irbis-button>
    <irbis-menu ref="menu" :triggerGap="10" :size="size">
      <slot />
    </irbis-menu>
  </div>
</template>

<script>
export default {
  name: "IrbisDropdown",

  props: {
    label: String,
    size: {
      type: String,
      default: "large"
    }
  },

  methods: {
    toggleMenu() {
      this.$refs.menu.toggle();
    }
  }
};
</script>