<script setup lang="ts">
import type { ToggleGroupItemProps } from 'reka-ui';
import { ToggleGroupItem, useForwardProps } from 'reka-ui';
import { inject } from 'vue';
import { cn } from '@/lib/utils';
import { toggleGroupVariants, type ToggleGroupVariants } from '.';
import { toggleGroupContextKey } from './context';

const props = defineProps<
  ToggleGroupItemProps & {
    variant?: ToggleGroupVariants['variant'];
    size?: ToggleGroupVariants['size'];
  }
>();

const context = inject(toggleGroupContextKey);

const forwarded = useForwardProps(props);
</script>

<template>
  <ToggleGroupItem
    data-slot="toggle-group-item"
    v-bind="forwarded"
    :class="
      cn(
        toggleGroupVariants({
          variant: props.variant ?? context?.variant?.value,
          size: props.size ?? context?.size?.value,
        }),
        $attrs.class ?? '',
      )
    "
  >
    <slot />
  </ToggleGroupItem>
</template>
