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

<script setup>
import { computed } from "vue";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../../composables/useComponentProps";
import { useLocale } from "../../composables/useLocale";
import { transformUI } from "../../utils";
import { tv } from "../../utils/tv";
import icons from "../../dictionary/icons";
import B24Collapsible from "../Collapsible.vue";
const _props = defineProps({
  icon: { type: [Function, Object], required: false },
  name: { type: String, required: false },
  openText: { type: String, required: false },
  closeText: { type: String, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
defineSlots();
const props = useComponentProps("prose.collapsible", _props);
const { t } = useLocale();
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.collapsible || {} })());
</script>

<template>
  <B24Collapsible :unmount-on-hide="false" :class="props.class" :b24ui="transformUI(b24ui, props.b24ui)">
    <template #default="{ open }">
      <button data-slot="trigger" :class="b24ui.trigger({ class: props.b24ui?.trigger })">
        <Component
          :is="props.icon || icons.chevronDown"
          data-slot="triggerIcon"
          :class="b24ui.triggerIcon({ class: props.b24ui?.triggerIcon })"
        />
        <span data-slot="triggerLabel" :class="b24ui.triggerLabel({ class: props.b24ui?.triggerLabel })">
          {{ open ? props.closeText || t("prose.collapsible.closeText") : props.openText || t("prose.collapsible.openText") }} {{ props.name || t("prose.collapsible.name") }}
        </span>
      </button>
    </template>

    <template #content>
      <slot />
    </template>
  </B24Collapsible>
</template>
