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

<script>
import { defineAsyncComponent } from 'vue';
const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/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>
