<template>
  <div :class="['ui selection dropdown', {'active visible': isOpen}]" @click="toggleDropdown">
    <div class="default text">{{ selected }}</div>
    <i class="dropdown icon"></i>
    <div :class="['menu', { 'visible transition': isOpen}]">
      <div
        v-for="option in options"
        @click="select(option)"
        :key="option"
        class="item"
      >
        {{ option }}
      </div>
    </div>
  </div>
</template>

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

  props: ["options", "selected"],

  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    select(option) {
      this.$emit('update:selection', option)
    },
  },
};
</script>