<template>
    <div class="menu gap-4 justify-content-center mt-5">

      <button
        class="btn btn-info"
        :class="{ active: halfDayType === 'AM' }"
        @click="toggleHalfDay('AM')"
      >
        <i class="bi bi-sun"></i>
      </button>
      <button
        class="btn btn-warning"
        :class="{ active: halfDayType === 'PM' }"
        @click="toggleHalfDay('PM')"
      >
        <i class="bi bi-moon"></i>
      </button>
      <div class="save-button-container">
        <button class="btn btn-success" @click="addVacationRequests">
          ✔
        </button>
      </div>
    </div>
  </template>

<script setup>
import { defineEmits, ref } from "vue";

const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
const halfDayType = ref(null);

const toggleHalfDay = (type) => {
  halfDayType.value = halfDayType.value === type ? null : type;
  emit("toggleHalfDay", halfDayType.value);
};

const addVacationRequests = () => {
  emit("addVacationRequests");
};
</script>

  <style scoped>

  </style>
