<script setup>
import { reactiveOmit } from "@vueuse/core";
import { CalendarCellTrigger, 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>
  <CalendarCellTrigger
    data-slot="calendar-cell-trigger"
    :class="cn(
  buttonVariants({ variant: 'ghost' }),
  'size-8 rounded-full p-0 font-normal text-center transition-all duration-180 aria-selected:opacity-100 cursor-pointer',
  // Today (when not selected): subtle ring instead of red highlight
  '[&[data-today]:not([data-selected])]:font-semibold [&[data-today]:not([data-selected])]:text-(--primary)',
  // Selected
  'data-selected:bg-(--primary) data-selected:opacity-100 data-selected:text-white data-selected:hover:bg-[color-mix(in_srgb,var(--primary)_80%,white)] data-selected:hover:text-white',
  // Disabled
  'data-disabled:text-zinc-500 data-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:hover:bg-transparent data-disabled:hover:text-zinc-500',
  // Unavailable
  'data-unavailable:text-zinc-300 data-unavailable:line-through',
  // Outside months
  'data-outside-view:text-zinc-300',
  props.class
)"
    v-bind="forwardedProps"
  >
    <slot />
  </CalendarCellTrigger>
</template>
