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

<script setup>
import { computed } from "vue";
import { Separator } from "reka-ui";
import { reactivePick, createReusableTemplate } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useForwardProps } from "../composables/useForwardProps";
import { tv } from "../utils/tv";
import B24Avatar from "./Avatar.vue";
const _props = defineProps({
  as: { type: null, required: false },
  label: { type: String, required: false },
  icon: { type: [Function, Object], required: false },
  avatar: { type: Object, required: false },
  accent: { type: null, required: false, default: "default" },
  size: { type: null, required: false, default: "thin" },
  type: { type: null, required: false, default: "solid" },
  orientation: { type: null, required: false, default: "horizontal" },
  position: { type: null, required: false, default: "center" },
  class: { type: null, required: false },
  b24ui: { type: null, required: false },
  decorative: { type: Boolean, required: false }
});
const slots = defineSlots();
const props = useComponentProps("separator", _props);
const appConfig = useAppConfig();
const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));
const [DefineContainer, ReuseContainer] = createReusableTemplate();
const hasContent = computed(() => !!(props.label || props.icon || props.avatar || slots.default));
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.separator || {} })({
  accent: props.accent,
  orientation: props.orientation,
  size: props.size,
  position: props.position,
  type: props.type
}));
</script>

<template>
  <DefineContainer>
    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
      <slot :b24ui="b24ui">
        <span v-if="props.label !== void 0 && props.label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">{{ props.label }}</span>
        <Component :is="props.icon" v-else-if="props.icon" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
        <B24Avatar v-else-if="props.avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="props.avatar" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
      </slot>
    </div>
  </DefineContainer>

  <Separator v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <ReuseContainer v-if="hasContent && props.position === 'start'" />

    <div data-slot="border" :class="b24ui.border({ class: props.b24ui?.border })" />

    <template v-if="hasContent && props.position === 'center'">
      <ReuseContainer />

      <div data-slot="border" :class="b24ui.border({ class: props.b24ui?.border })" />
    </template>

    <ReuseContainer v-if="hasContent && props.position === 'end'" />
  </Separator>
</template>
