<script setup>
import { Icon } from "@iconify/vue";
import { cn } from "../../../utils/cn";
import { Calendar } from "../calendar";
defineOptions({ name: "UiDatePickerYearPanel" });
const props = defineProps({
  modelValue: { type: Object, required: false },
  isDateDisabled: { type: Function, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
const emits = defineEmits(["update:modelValue"]);
function handleUpdate(value) {
  if (Array.isArray(value)) {
    emits("update:modelValue", value[0]);
    return;
  }
  emits("update:modelValue", value);
}
</script>

<template>
  <Calendar
    layout="year"
    data-slot="date-picker-year-panel"
    :class="cn(props.class)"
    :model-value="props.modelValue"
    :default-placeholder="props.modelValue"
    :is-date-disabled="props.isDateDisabled"
    @update:model-value="handleUpdate"
  >
    <template #calendar-prev-icon>
      <Icon icon="lucide:chevron-left" />
    </template>
    <template #calendar-next-icon>
      <Icon icon="lucide:chevron-right" />
    </template>
  </Calendar>
</template>
