<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import type { ItemVariants } from '.';
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
import { itemVariants } from '.';

const props = withDefaults(
  defineProps<
    PrimitiveProps & {
      class?: HTMLAttributes['class'];
      variant?: ItemVariants['variant'];
      size?: ItemVariants['size'];
      /** When true, sets `role="listitem"` for use inside an element with `role="list"`. */
      withListSemantics?: boolean;
    }
  >(),
  {
    as: 'div',
    withListSemantics: false,
  },
);
</script>

<template>
  <Primitive
    data-slot="item"
    :as="props.as"
    :as-child="props.asChild"
    :class="
      cn(
        itemVariants({ variant: props.variant, size: props.size }),
        props.class,
      )
    "
    :role="props.withListSemantics ? 'listitem' : undefined"
  >
    <slot />
  </Primitive>
</template>
