<script setup>
import { cn } from "../../../utils/cn";
import { RangeCalendar } from "../range-calendar";
defineOptions({ name: "UiDateRangePickerDatePanel" });
const props = defineProps({
  modelValue: { type: Object, required: false },
  isDateDisabled: { type: Function, required: false },
  numberOfMonths: { type: Number, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
const emits = defineEmits(["update:modelValue"]);
function handleUpdate(value) {
  emits("update:modelValue", value);
}
</script>

<template>
  <RangeCalendar
    data-slot="date-range-picker-date-panel"
    :class="cn(props.class)"
    :model-value="props.modelValue"
    :default-placeholder="props.modelValue?.start"
    :is-date-disabled="props.isDateDisabled"
    :number-of-months="props.numberOfMonths ?? 2"
    @update:model-value="handleUpdate"
  />
</template>
