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

<template>
  <RangeCalendarCellTrigger
    data-slot="range-calendar-trigger"
    :class="cn(
  buttonVariants({ variant: 'ghost' }),
  'relative z-10 size-8 rounded-full p-0 font-normal text-center cursor-pointer data-selected:opacity-100',
  // Today (not selected): bold primary text, no special bg.
  '[&[data-today]:not([data-selected])]:font-semibold [&[data-today]:not([data-selected])]:text-(--primary)',
  // Selection start/end: solid primary circle with white text. Middle
  // selected cells stay transparent so the cell-level track shows through.
  'data-selection-start:bg-(--primary) data-selection-start:text-white data-selection-start:hover:bg-[color-mix(in_srgb,var(--primary)_80%,white)] data-selection-start:hover:text-white data-selection-start:focus:bg-[color-mix(in_srgb,var(--primary)_80%,white)] data-selection-start:focus:text-white',
  'data-selection-end:bg-(--primary) data-selection-end:text-white data-selection-end:hover:bg-[color-mix(in_srgb,var(--primary)_80%,white)] data-selection-end:hover:text-white data-selection-end:focus:bg-[color-mix(in_srgb,var(--primary)_80%,white)] data-selection-end:focus:text-white',
  // In-progress range preview: anchor + cursor cell get solid primary; cells
  // between stay transparent so only the cell-level track shows.
  'data-highlighted-start:bg-(--primary) data-highlighted-start:text-white',
  'data-highlighted-end:bg-(--primary) data-highlighted-end:text-white',
  // Outside months
  'data-outside-view:text-zinc-300',
  // Disabled
  'data-disabled:text-zinc-300 data-disabled:opacity-50',
  // Unavailable
  'data-unavailable:text-zinc-300 data-unavailable:line-through',
  props.class
)"
    v-bind="forwardedProps"
  >
    <slot />
  </RangeCalendarCellTrigger>
</template>
