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

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

  export default {
    props: ['parent'],

    components: {
      AddIcon
    },

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

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

  .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-page;
    cursor: pointer;
    overflow: hidden;

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

    &__icon {
      width: 80px;
      fill: $color-white;
    }
  }
</style>
