<template>
  <component :is="component" v-bind="properties" class="add-widget" @click="$emit('click')" :class="{ 'add-widget--reverse': reverse }">
    <add-icon class="add-widget__add"></add-icon>
  </component>
</template>

<script>
  import AddIcon from '@/components/icons/AddIcon.vue';

  export default {
    props: {
      route: {
        type: String,
        default: null
      },
      reverse: { // use reverse colors
        type: Boolean,
        default: false
      },
      click: {
        type: Function,
        default: null
      }
    },

    computed: {
      component() {
        // only use the router link if the route prop is provided, otherwise render a normal anchor tag
        return this.route ? 'router-link' : 'a'
      },
      properties() {
        return this.route ? {
          to: this.route,
          tag: 'div'
        } : {}
      }
    },

    components: {
      AddIcon
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .add-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    @include widget-shadow;
    cursor: pointer;

    &__add {
      width: 80px;
      fill: $color-grey;
    }

    &--reverse {
      @include widget-shadow-reverse;
    }

    &--reverse &__add {
      fill: white;
    }
  }
</style>
