<template>
  <div
    class="add-room-entry-button"
    data-cy="add-room-entry-button"
    @click="addRoomEntry">
    <plus-icon class="add-room-entry-button__icon"/>
    <span class="add-room-entry-button__text">Beitrag erfassen</span>
  </div>
</template>

<script>
  import PlusIcon from '@/components/icons/PlusIcon';

  export default {
    props: ['parent'],

    components: {
      PlusIcon
    },

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

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

  .add-room-entry-button {
    border: 2px solid $color-white;
    border-radius: 12px;
    height: 150px;
    box-sizing: border-box;
    margin-bottom: 25px;
    justify-content: center;
    align-items: center;
    break-inside: avoid-column;
    overflow: hidden;
    cursor: pointer;

    display: none;
    @include desktop {
      display: flex;
    }

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

    &__text {
      @include regular-text;
      color: $color-white;
    }
  }
</style>
