<template>
  <transition name="fade">
    <div :class="classesString" @click="$emit('click')">
      <font-awesome-icon :icon="iconString" :spin="loading" fixed-width />
      <slot />
    </div>
  </transition>
</template>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    state: [Number, Boolean],
    icons: {
      type: [String, Array],
      default: () => ["angle-down", "angle-up"]
    },
    classes: {
      type: [String, Array],
      default: () => ["text-info", "text-white"]
    }
  },
  computed: {
    classesString() {
      return (
        "pointer " +
        (Array.isArray(this.classes)
          ? this.classes[Number(this.state)]
          : this.classes)
      );
    },
    iconString() {
      return this.loading
        ? "spinner"
        : Array.isArray(this.icons)
        ? this.icons[Number(this.state)]
        : this.icons;
    }
  }
};
</script>