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

    components: {
      AddIcon
    },

    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'
        } : {};
      }
    },
  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

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

    @include desktop {
      display: flex;
    }

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

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

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