<script setup lang="ts">
import type { HTMLAttributes } from 'vue';
import type { PrimitiveProps } from 'reka-ui';
import type { BadgeVariants } from '.';
import { reactiveOmit } from '@vueuse/core';
import { Primitive } from 'reka-ui';
import { computed, useAttrs } from 'vue';
import { cn, omitClass } from '@/lib/utils';
import { badgeVariants } from '.';

const props = defineProps<
  PrimitiveProps & {
    variant?: BadgeVariants['variant'];
    size?: BadgeVariants['size'];
    disabled?: boolean;
  }
>();

const attrs = useAttrs();

const delegatedProps = reactiveOmit(props, 'variant', 'size', 'disabled');

const delegatedAttrs = computed(() => omitClass(attrs));

const forwardedProps = computed(() => ({
  ...delegatedProps,
  ...delegatedAttrs.value,
}));

const badgeClass = computed(() =>
  cn(
    badgeVariants({ variant: props.variant, size: props.size }),
    attrs.class as HTMLAttributes['class'],
  ),
);
</script>

<template>
  <Primitive
    v-if="asChild"
    data-slot="badge"
    :aria-disabled="props.disabled ? 'true' : undefined"
    :class="badgeClass"
    v-bind="forwardedProps"
  >
    <slot />
  </Primitive>
  <Primitive
    v-else
    data-slot="badge"
    :aria-disabled="props.disabled ? 'true' : undefined"
    :class="badgeClass"
    v-bind="forwardedProps"
  >
    <slot />
  </Primitive>
</template>
