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

<script setup>
import { computed } from "vue";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../../composables/useComponentProps";
import { tv } from "../../utils/tv";
import icons from "../../dictionary/icons";
import B24Link from "../Link.vue";
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 },
  title: { type: String, required: false },
  description: { type: String, required: false },
  color: { type: null, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const props = useComponentProps("prose.card", _props);
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.prose?.card || {} })({
  color: props.color,
  to: !!props.to,
  title: !!props.title
}));
const target = computed(() => props.target || (!!props.to && typeof props.to === "string" && props.to.startsWith("http") ? "_blank" : void 0));
const ariaLabel = computed(() => (props.title || "Card link").trim());
const iconFromIconName = computed(() => {
  if (!props.iconName) {
    return void 0;
  }
  switch (props.iconName) {
    case "InfoCircleIcon":
      return icons.InfoCircleIcon;
    case "GitHubIcon":
      return icons.GitHubIcon;
    case "MdnWebDocIcon":
      return icons.MdnWebDocIcon;
    case "Bitrix24Icon":
      return icons.Bitrix24Icon;
    case "DemonstrationOnIcon":
      return icons.DemonstrationOnIcon;
  }
  return void 0;
});
</script>

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

    <Component
      :is="props.icon"
      v-if="props.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="!!props.to && target === '_blank'"
      data-slot="externalIcon"
      :class="b24ui.externalIcon({ class: props.b24ui?.externalIcon })"
    />

    <p v-if="props.title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
      <slot name="title" mdc-unwrap="p">
        {{ props.title }}
      </slot>
    </p>

    <div v-if="!!slots.default" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
      <slot>
        {{ props.description }}
      </slot>
    </div>
  </div>
</template>
