<template>
  <router-link
    class="add-room-entry-button"
    data-cy="add-room-entry-button"
    :to="addRoomEntryRoute"
  >
    <plus-icon class="add-room-entry-button__icon" />
    <span class="add-room-entry-button__text">Beitrag erfassen</span>
  </router-link>
</template>

<script setup lang="ts">
import { ADD_ROOM_ENTRY_PAGE, ADD_MODULE_ROOM_ENTRY_PAGE } from '@/router/room.names';
import { defineAsyncComponent } from 'vue';
const PlusIcon = defineAsyncComponent(() => import('@/components/icons/PlusIcon.vue'));

const props = withDefaults(
  defineProps<{
    module?: boolean;
  }>(),
  {
    module: false,
  }
);
let name;
if (props.module) {
  name = ADD_MODULE_ROOM_ENTRY_PAGE;
} else {
  name = ADD_ROOM_ENTRY_PAGE;
}
const addRoomEntryRoute = {
  name,
};
</script>

<style lang="scss">
// todo: re-add scoped once we're on vite
@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>
