<script setup lang="ts">
import type { CalendarCellTriggerProps } from "reka-ui";
import type { HTMLAttributes } from "vue";
import { reactiveOmit } from "@vueuse/core";
import { CalendarCellTrigger, useForwardProps } from "reka-ui";
import { buttonVariants } from "@/components/ui/Button.vue";
import { cn } from "@/lib/utils";

interface Props extends CalendarCellTriggerProps {
  class?: HTMLAttributes["class"];
}

const props = defineProps<Props>();
const delegatedProps = reactiveOmit(props, "class");
const forwarded = useForwardProps(delegatedProps);
</script>

<template>
  <CalendarCellTrigger
    data-slot="calendar-cell-trigger"
    v-bind="forwarded"
    :class="
      cn(
        buttonVariants({ variant: 'ghost' }),
        'size-8 p-0 font-normal',
        'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
        'data-[today]:bg-accent data-[today]:text-accent-foreground',
        'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 data-[outside-view]:data-[selected]:bg-accent/50 data-[outside-view]:data-[selected]:text-muted-foreground data-[outside-view]:data-[selected]:opacity-30',
        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
        props.class,
      )
    "
  >
    <slot />
  </CalendarCellTrigger>
</template>
