<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Holiday Management" title="Branch and country holidays" subtitle="Public, government, festival, weekend, and branch-wise holiday overtime rules." action="Add Holiday" />
    <div class="grid gap-4 md:grid-cols-3">
      <MetricCard label="Holidays" :value="holidays.length" helper="Configured dates" tone="live" />
      <MetricCard label="Weekend" :value="weekends.join(', ')" helper="Weekly off" tone="ok" />
      <MetricCard label="Holiday OT" :value="`${otRules.holiday_multiplier || 0}x`" helper="Payroll multiplier" tone="warn" />
    </div>
    <DataPanel title="Upcoming Holidays" :items="holidays" />
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import DataPanel from '../components/DataPanel.vue';
import MetricCard from '../components/MetricCard.vue';
import ModuleHeader from '../components/ModuleHeader.vue';
import { getJson } from '../services/api.js';

const holidays = ref([]);
const weekends = ref([]);
const otRules = ref({});

onMounted(async () => {
  const data = await getJson('/holidays');
  holidays.value = data.holidays;
  weekends.value = data.weekends;
  otRules.value = data.ot_rules;
});
</script>
