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

<script setup>
import { computed } from "vue";
import { Primitive } 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 },
  name: { type: String, required: false },
  type: { type: String, required: false },
  description: { type: String, required: false },
  required: { type: Boolean, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const props = useComponentProps("prose.field", _props);
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.prose?.field || {} })());
</script>

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

      <div v-if="props.type || props.required" data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
        <span v-if="props.type" data-slot="type" :class="b24ui.type({ class: props.b24ui?.type })">
          {{ props.type }}
        </span>

        <span v-if="props.required" data-slot="required" :class="b24ui.required({ class: props.b24ui?.required })">
          required
        </span>
      </div>
    </div>

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