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

<script setup>
import { computed, onBeforeUpdate, shallowRef } from "vue";
import { Primitive, Slot } from "reka-ui";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { tv } from "../utils/tv";
const _props = defineProps({
  as: { type: null, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const props = useComponentProps("page", _props);
const appConfig = useAppConfig();
const hasLeft = shallowRef(!!slots.left);
const hasRight = shallowRef(!!slots.right);
onBeforeUpdate(() => {
  hasLeft.value = !!slots.left;
  hasRight.value = !!slots.right;
});
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.page || {} })({
  left: hasLeft.value,
  right: hasRight.value
}));
</script>

<template>
  <Primitive :as="props.as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <Slot v-if="!!slots.left" data-slot="left" :class="b24ui.left({ class: props.b24ui?.left })">
      <slot name="left" />
    </Slot>

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

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