<script setup>
import { defineProps } from 'vue';
import { date_shortcuts, selected_date, selectDate} from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";

</script>

<template>
  <div class="navbar is-white">
    <div class="navbar-menu">
      <!-- Date shortcuts -->
      <div class="navbar-start">
        <div class="navbar-item">
          <div class="buttons">
            <button v-for="(shortcut, index) in date_shortcuts" :key="index" @click="selectDate(shortcut.date)"
                    class="button is-light" :class="{ 'is-info': selected_date === shortcut.date }">
              {{ shortcut.label }}
            </button>
          </div>
        </div>
      </div>
      <!-- Select custom date -->
      <div class="navbar-end">
        <div class="navbar-item">
          <div class="field">
            <div class="control">
              <input class="input" type="date" v-model="selected_date"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>