<script>
import theme from "#build/b24ui/prose/code-collapse";
</script>

<script setup>
import { computed } from "vue";
import { useAppConfig } from "#imports";
import { useLocale } from "../../composables/useLocale";
import { tv } from "../../utils/tv";
import icons from "../../dictionary/icons";
import B24Button from "../Button.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: null, required: false }
});
defineSlots();
const open = defineModel("open", { type: Boolean, ...{ default: false } });
const { t } = useLocale();
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.codeCollapse || {} })({
  open: open.value
}));
</script>

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

    <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
      <B24Button
        :icon="icon || icons.chevronDown"
        color="air-secondary-accent-1"
        :data-state="open ? 'open' : 'closed'"
        :label="`${open ? props.closeText || t('prose.codeCollapse.closeText') : props.openText || t('prose.codeCollapse.openText')} ${props.name || t('prose.codeCollapse.name')}`"
        data-slot="trigger"
        :class="b24ui.trigger({ class: props.b24ui?.trigger })"
        :b24ui="{ leadingIcon: b24ui.triggerIcon({ class: props.b24ui?.triggerIcon }) }"
        @click="open = !open"
      />
    </div>
  </div>
</template>
