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

<script setup>
import { computed } from "vue";
import { useAppConfig } from "#imports";
import { tv } from "../../utils/tv";
import icons from "../../dictionary/icons";
import B24Link from "../Link.vue";
import GitHubIcon from "@bitrix24/b24icons-vue/social/GitHubIcon";
import InfoCircleIcon from "@bitrix24/b24icons-vue/outline/InfoCircleIcon";
import MdnwebdocsIcon from "@bitrix24/b24icons-vue/social/MdnwebdocsIcon";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  to: { type: null, required: false },
  target: { type: [String, Object, null], required: false },
  icon: { type: [Function, Object], required: false },
  iconName: { type: String, required: false },
  color: { type: null, required: false },
  class: { type: null, required: false },
  b24ui: { type: null, required: false }
});
defineSlots();
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.callout || {} })({
  color: props.color,
  to: !!props.to
}));
const target = computed(() => props.target || (!!props.to && typeof props.to === "string" && props.to.startsWith("http") ? "_blank" : void 0));
const iconFromIconName = computed(() => {
  if (!props.iconName) {
    return void 0;
  }
  switch (props.iconName) {
    case "InfoCircleIcon":
      return InfoCircleIcon;
    case "GitHubIcon":
      return GitHubIcon;
    case "MdnWebDocIcon":
      return MdnwebdocsIcon;
  }
  return void 0;
});
</script>

<template>
  <div data-slot="base" :class="b24ui.base({ class: props.class })">
    <B24Link
      v-if="to"
      v-bind="{ to, target, ...$attrs }"
      class="focus:outline-none"
      tabindex="-1"
      raw
    >
      <span class="absolute inset-0" aria-hidden="true" />
    </B24Link>

    <Component
      :is="icon"
      v-if="icon"
      data-slot="icon"
      :class="b24ui.icon({ class: props.b24ui?.icon })"
    />
    <Component
      :is="iconFromIconName"
      v-else-if="props.iconName"
      data-slot="icon"
      :class="b24ui.icon({ class: props.b24ui?.icon })"
    />
    <Component
      :is="icons.external"
      v-if="!!to && target === '_blank'"
      data-slot="externalIcon"
      :class="b24ui.externalIcon({ class: props.b24ui?.externalIcon })"
    />
    <slot mdc-unwrap="p" />
  </div>
</template>
