<template>
  <a
    class="add-project-entry"
    @click="addProjectEntry">
    <plus-icon class="add-project-entry__icon" />
    <span class="add-project-entry__text">Beitrag erfassen</span>
  </a>
</template>

<script>
  import PlusIcon from '@/components/icons/PlusIcon';
  export default {
    props: ['project'],
    components: {PlusIcon},

    methods: {
      addProjectEntry() {
        this.$store.dispatch('addProjectEntry', this.project);
      }
    }
  };
</script>

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

  .add-project-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid $color-brand;
    border-radius: $default-border-radius;
    cursor: pointer;

    &__icon {
      width: 20px;
      height: 20px;
      fill: $color-brand;
      margin-right: $small-spacing;
    }

    &__text {
      @include navigation-link;
      color: $color-brand;
    }
  }
</style>
