<script setup>
defineProps({
  month: { type: String, required: true },
  year: { type: String, required: true },
  week: { type: String, required: false },
  isSidePanelOpen: { type: Boolean, required: true },
  sidePanel: { type: Boolean, required: true }
});
const view = defineModel("view", { type: String, ...{ required: true } });
const search = defineModel("search", { type: String });
const emit = defineEmits(["prev", "next", "toToday", "toggleSidePanel"]);
const views = [
  { label: "Day", value: "day" },
  { label: "Week", value: "week" }
];
</script>

<template>
  <div class="flex flex-col md:flex-row w-full justify-between items-center gap-4">
    <slot
      :month="month"
      :year="year"
      :week="week"
      :view="view"
      :search="search"
      :is-side-panel-open="isSidePanelOpen"
      :side-panel="sidePanel"
    >
      <div class="flex items-center justify-between md:justify-start gap-2 md:gap-4 w-full md:w-auto">
        <div class="flex items-center gap-2 md:gap-4">
          <UButton
            v-if="sidePanel"
            :icon="isSidePanelOpen ? 'i-hugeicons:panel-left-open' : 'i-hugeicons:panel-left-close'"
            color="neutral"
            variant="ghost"
            size="xl"
            @click="emit('toggleSidePanel')"
          />
          <div class="flex items-baseline gap-1 md:gap-2 whitespace-nowrap">
            <span class="text-xl md:text-2xl font-bold text-highlighted tracking-tight">{{ month }}</span>
            <span class="text-xl md:text-2xl text-dimmed">{{ year }}</span>
            <span
              v-if="week"
              class="text-xs md:text-sm font-medium text-dimmed self-center ml-1"
            >{{ week }}</span>
          </div>
        </div>

        <div class="flex items-center gap-1 md:gap-2">
          <UButton
            label="Today"
            color="neutral"
            variant="soft"
            class="hidden sm:flex"
            @click="emit('toToday')"
          />
          <UButton
            icon="i-lucide-calendar"
            color="neutral"
            variant="soft"
            size="sm"
            class="sm:hidden"
            @click="emit('toToday')"
          />
          <div class="flex gap-0.5 md:gap-1">
            <UButton
              color="neutral"
              variant="ghost"
              size="sm"
              :aria-label="`Previous ${view}`"
              icon="i-lucide-chevron-left"
              @click="emit('prev')"
            />
            <UButton
              color="neutral"
              variant="ghost"
              size="sm"
              :aria-label="`Next ${view}`"
              icon="i-lucide-chevron-right"
              @click="emit('next')"
            />
          </div>
        </div>
      </div>

      <UTabs
        v-model="view"
        :content="false"
        :items="views"
        color="neutral"
        variant="pill"
        class="hidden md:block"
      />
    </slot>
  </div>
</template>
