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

<script setup>
import { computed } from "vue";
import { Separator, useForwardProps } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
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" },
  class: { type: null, required: false },
  b24ui: { type: null, required: false },
  decorative: { type: Boolean, required: false }
});
const slots = defineSlots();
const appConfig = useAppConfig();
const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.separator || {} })({
  accent: props.accent,
  orientation: props.orientation,
  size: props.size,
  type: props.type
}));
</script>

<template>
  <Separator v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <div data-slot="border" :class="b24ui.border({ class: props.b24ui?.border })" />

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

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