<template lang="pug">
  .layout-switch-wrapper.flex.h-10.p-1
    button#day.flex.items-center.px-3.transition.duration-200.ease-linear(
      :class="dayLayoutState",
      @click="changeSelectedLayout"
    ) День
    button#week.flex.items-center.px-3.transition.duration-200.ease-linear(
      :class="weekLayoutState",
      @click="changeSelectedLayout"
    ) Неделя
</template>

<script>
export default {
  name: "CalendarLayoutSwitch",
  data() {
    return {
      selectedLayout: "day",
    };
  },
  computed: {
    dayLayoutState() {
      return {
        active: this.selectedLayout === "day",
      };
    },
    weekLayoutState() {
      return {
        active: this.selectedLayout === "week",
      };
    },
  },
  methods: {
    changeSelectedLayout(event) {
      this.selectedLayout = event.target.id;
      this.$emit("selected", event.target.id);
    },
  },
};
</script>

<style lang="sass" scoped>
.active
  background-color: var(--bg-aqua-blue)
  color: var(--default-white)
  border-radius: 4px

.layout-switch-wrapper
  background-color: var(--bg-light-grey)
  color: var(--font-grey-color)
  border-radius: 4px
</style>
