<script>
import theme from "#build/b24ui/chip";
</script>

<script setup>
import { computed } from "vue";
import { Primitive, Slot } from "reka-ui";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { tv } from "../utils/tv";
defineOptions({ inheritAttrs: false });
const _props = defineProps({
  as: { type: null, required: false },
  text: { type: [String, Number], required: false },
  trailingIcon: { type: [Function, Object], required: false },
  color: { type: null, required: false },
  inverted: { type: Boolean, required: false, default: false },
  size: { type: null, required: false },
  position: { type: null, required: false },
  inset: { type: Boolean, required: false, default: false },
  standalone: { type: Boolean, required: false, default: false },
  hideZero: { type: Boolean, required: false, default: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
defineSlots();
const props = useComponentProps("chip", _props);
const show = defineModel("show", { type: Boolean, ...{ default: true } });
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chip || {} })({
  color: props.color,
  inverted: Boolean(props.inverted),
  size: props.size,
  // size.value ?? props.size
  position: props.position,
  inset: Boolean(props.inset),
  standalone: Boolean(props.standalone),
  hideZero: Boolean(props.hideZero),
  oneDigit: !props.trailingIcon && props.text?.toString().length === 1
}));
const value = computed(() => {
  return props.text;
});
</script>

<template>
  <Primitive
    :as="props.as"
    data-slot="root"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
  >
    <Slot v-bind="$attrs">
      <slot />
    </Slot>

    <span
      v-if="show"
      data-slot="base"
      :class="b24ui.base({ class: props.b24ui?.base })"
      :data-value="value"
    >
      <slot name="content">
        <span>{{ props.text }}</span>
      </slot>
      <slot name="trailing">
        <Component
          :is="props.trailingIcon"
          data-slot="trailingIcon"
          :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
        />
      </slot>
    </span>
  </Primitive>
</template>
