<script setup>
import { reactiveOmit } from "@vueuse/core";
import { RangeCalendarCell, useForwardProps } from "reka-ui";
import { cn } from "../../../utils/cn";
const props = defineProps({
  date: { type: Object, required: true },
  asChild: { type: Boolean, required: false },
  as: { type: null, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
const delegatedProps = reactiveOmit(props, "class");
const forwardedProps = useForwardProps(delegatedProps);
</script>

<template>
  <RangeCalendarCell
    data-slot="range-calendar-cell"
    :class="cn(
  'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1',
  // Track bar drawn behind the trigger via ::before. The bar\'s horizontal
  // extent is driven by --bar-left / --bar-right CSS variables so the
  // start/end rules don\'t fight each other through left/right specificity.
  '[--bar-left:0px] [--bar-right:0px]',
  // While a hover preview is active (any cell has data-highlighted), reka
  // also keeps the committed selection-start/end markers on the anchor
  // cell. We must style the bar based on the *highlighted* range, not the
  // stale committed one — the :not(:has([data-highlighted])) guard skips
  // selection rules during in-progress selection.
  '[&:has([data-selection-start]):not(:has([data-highlighted]))]:[--bar-left:50%]',
  '[&:has([data-selection-end]):not(:has([data-highlighted]))]:[--bar-right:50%]',
  '[&:has([data-highlighted-start])]:[--bar-left:50%]',
  '[&:has([data-highlighted-end])]:[--bar-right:50%]',
  'before:pointer-events-none before:absolute before:top-1/2 before:-translate-y-1/2',
  'before:h-8 before:z-0',
  'before:left-[var(--bar-left)] before:right-[var(--bar-right)]',
  'before:bg-[color-mix(in_srgb,var(--primary)_15%,white)]',
  'before:hidden',
  '[&:has([data-selected])]:before:block [&:has([data-highlighted])]:before:block',
  // Single-cell range: a cell with both start- and end-markers would have
  // a zero-width bar; hide it so the solid circle stands alone.
  '[&:has([data-selection-start][data-selection-end])]:before:hidden',
  '[&:has([data-highlighted-start][data-highlighted-end])]:before:hidden',
  props.class
)"
    v-bind="forwardedProps"
  >
    <slot />
  </RangeCalendarCell>
</template>
