<template>
  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div v-if="title || description" :class="ui.header({ class: props.ui?.header })">
      <div v-if="title" :class="ui.title({ class: props.ui?.title })">
        {{ title }}
      </div>
      <div v-if="description" :class="ui.description({ class: props.ui?.description })">
        {{ description }}
      </div>
    </div>
    <div :class="ui.body({ class: props.ui?.body })">
      <slot />
    </div>
  </div>
</template>

<script>
import theme from "#build/cms/form-panel-section";
import { useAppConfig } from "#imports";
import { computed } from "vue";
import { tv } from "../tv";
</script>

<script setup>
const props = defineProps({
  title: { type: String, required: false },
  description: { type: String, required: false },
  class: { type: null, required: false },
  ui: { type: null, required: false }
});
defineSlots();
const appConfig = useAppConfig();
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formPanelSection || {} })());
</script>
