<template>
  <button v-if="isOpen" @click="toggle" class="btn btn btn-outline-primary">
    <span>{{ closeText }}</span>

    <svg class="nav-icon-container" :class="'icon icon-' + closeIcon">
      <use :xlink:href="'#icon-' + closeIcon"></use>
    </svg>
  </button>
  <button v-else @click="toggle" class="btn btn btn-outline-primary">
    <span>{{ openText }}</span>

    <svg class="nav-icon-container" :class="'icon icon-' + openIcon">
      <use :xlink:href="'#icon-' + openIcon"></use>
    </svg>
  </button>
</template>

<script>
export default {
  props: {
    openIcon: {
      type: String,
      required: true,
    },
    closeIcon: {
      type: String,
      required: true,
    },
    openText: {
      type: String,
      required: true,
    },
    closeText: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
      this.$emit("toggle", this.isOpen);
    },
  },
};
</script>

<style scoped>
/* button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
}

span {
  margin-right: 8px;
}

svg {
  width: 24px;
  height: 24px;
} */
</style>