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

<script setup>
import { computed } from "vue";
import { useAppConfig, useRuntimeConfig } from "#imports";
import { useComponentProps } from "../../composables/useComponentProps";
import { tv } from "../../utils/tv";
import icons from "../../dictionary/icons";
const _props = defineProps({
  id: { type: String, required: false },
  anchor: { type: Boolean, required: false },
  accent: { type: null, required: false, default: "default" },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
defineSlots();
const props = useComponentProps("prose.h2", _props);
const appConfig = useAppConfig();
const { headings } = useRuntimeConfig().public?.mdc || {};
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.prose?.h2 || {} })({
  accent: props.accent
}));
const generate = computed(() => props.id && (props.anchor ?? (typeof headings?.anchorLinks === "boolean" ? headings.anchorLinks : headings?.anchorLinks?.h2) ?? false));
</script>

<template>
  <h2
    :id="props.id"
    data-slot="base"
    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
  >
    <a v-if="props.id && generate" :href="`#${props.id}`" data-slot="link" :class="b24ui.link({ class: props.b24ui?.link })">
      <span data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
        <Component
          :is="icons.hash"
          data-slot="leadingIcon"
          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
        />
      </span>

      <slot />
    </a>
    <slot v-else />
  </h2>
</template>
