<script>
import theme from "#build/b24ui/content/content-surround";
</script>

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { createReusableTemplate } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../../composables/useComponentProps";
import { useLocale } from "../../composables/useLocale";
import { tv } from "../../utils/tv";
import icons from "../../dictionary/icons";
import B24Link from "../Link.vue";
defineOptions({ inheritAttrs: false });
const _props = defineProps({
  as: { type: null, required: false },
  prevIcon: { type: [Function, Object], required: false },
  nextIcon: { type: [Function, Object], required: false },
  surround: { type: Array, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
defineSlots();
const props = useComponentProps("contentSurround", _props);
const { dir } = useLocale();
const appConfig = useAppConfig();
const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate({
  props: {
    link: Object,
    icon: [Object, Function],
    direction: String
  }
});
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.contentSurround || {} })());
const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? icons.arrowRight : icons.arrowLeft));
const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? icons.arrowLeft : icons.arrowRight));
</script>

<template>
  <DefineLinkTemplate v-slot="{ link, icon, direction }">
    <B24Link
      v-if="link"
      :to="link.path"
      raw
      data-slot="link"
      :class="b24ui.link({ class: [props.b24ui?.link, link.b24ui?.link, link.class], direction })"
    >
      <slot name="link" :link="link" :b24ui="b24ui">
        <div data-slot="linkLeading" :class="b24ui.linkLeading({ class: [props.b24ui?.linkLeading, link.b24ui?.linkLeading] })">
          <slot name="link-leading" :link="link" :b24ui="b24ui">
            <Component
              :is="link.icon || icon"
              data-slot="linkLeadingIcon"
              :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, link.b24ui?.linkLeadingIcon], direction })"
            />
          </slot>
        </div>

        <p data-slot="linkTitle" :class="b24ui.linkTitle({ class: [props.b24ui?.linkTitle, link.b24ui?.linkTitle] })">
          <slot name="link-title" :link="link" :b24ui="b24ui">
            {{ link.title }}
          </slot>
        </p>

        <p data-slot="linkDescription" :class="b24ui.linkDescription({ class: [props.b24ui?.linkDescription, link.b24ui?.linkDescription] })">
          <slot name="link-description" :link="link" :b24ui="b24ui">
            {{ link.description }}
          </slot>
        </p>
      </slot>
    </B24Link>
    <span v-else class="hidden sm:block">&nbsp;</span>
  </DefineLinkTemplate>

  <Primitive v-if="props.surround" :as="props.as" v-bind="$attrs" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <ReuseLinkTemplate :link="props.surround[0]" :icon="prevIcon" direction="left" />
    <ReuseLinkTemplate :link="props.surround[1]" :icon="nextIcon" direction="right" />
  </Primitive>
</template>
