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

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { useAppConfig } from "#imports";
import { tv } from "../utils/tv";
import B24Chip from "./Chip.vue";
import B24Avatar from "./Avatar.vue";
import B24Link from "./Link.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  as: { type: null, required: false },
  name: { type: String, required: false },
  description: { type: String, required: false },
  avatar: { type: Object, required: false },
  chip: { type: [Boolean, Object], required: false },
  size: { type: null, required: false },
  orientation: { type: null, required: false, default: "horizontal" },
  to: { type: null, required: false },
  target: { type: [String, Object, null], required: false },
  onClick: { type: Function, required: false },
  class: { type: null, required: false },
  b24ui: { type: null, required: false }
});
const slots = defineSlots();
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.user || {} })({
  size: props.size,
  orientation: props.orientation,
  to: !!props.to || !!props.onClick
}));
const chipSize = computed(() => {
  switch (props.size) {
    case "3xs":
      return "sm";
    case "2xs":
      return "sm";
    case "xs":
      return "sm";
    case "md":
      return "sm";
    case "lg":
      return "md";
    case "xl":
      return "md";
    case "2xl":
      return "lg";
    case "3xl":
      return "lg";
  }
  return "sm";
});
</script>

<template>
  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" @click="onClick">
    <slot name="avatar" :b24ui="b24ui">
      <B24Chip v-if="chip && avatar && !['3xs'].includes(size || '')" inset v-bind="typeof chip === 'object' ? chip : {}" :size="chipSize">
        <B24Avatar :alt="name" v-bind="avatar" :size="size" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
      </B24Chip>
      <B24Avatar
        v-else-if="avatar"
        :alt="name"
        v-bind="avatar"
        :size="size"
        data-slot="avatar"
        :class="b24ui.avatar({ class: props.b24ui?.avatar })"
      />
    </slot>

    <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
      <B24Link
        v-if="to"
        :aria-label="name"
        v-bind="{ to, target, ...$attrs }"
        class="focus:outline-none peer"
        tabindex="-1"
        raw
      >
        <span class="absolute inset-0" aria-hidden="true" />
      </B24Link>

      <slot>
        <p v-if="name || !!slots.name" data-slot="name" :class="b24ui.name({ class: props.b24ui?.name })">
          <slot name="name">
            {{ name }}
          </slot>
        </p>
        <p v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
          <slot name="description">
            {{ description }}
          </slot>
        </p>
      </slot>
    </div>
  </Primitive>
</template>
