<script>
import theme from "#build/b24ui/page-links";
</script>

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { pickLinkProps } from "../utils/link";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
import B24Link from "./Link.vue";
import B24LinkBase from "./LinkBase.vue";
const _props = defineProps({
  as: { type: null, required: false, default: "nav" },
  title: { type: String, required: false },
  links: { type: Array, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const props = useComponentProps("pageLinks", _props);
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.pageLinks || {} })());
</script>

<template>
  <Primitive :as="props.as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <p v-if="props.title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
      <slot name="title">
        {{ props.title }}
      </slot>
    </p>

    <ul data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
      <li v-for="(link, index) in props.links" :key="index" data-slot="item" :class="b24ui.item({ class: [props.b24ui?.item, link.b24ui?.item] })">
        <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
          <B24LinkBase v-bind="slotProps" data-slot="link" :class="b24ui.link({ class: [props.b24ui?.link, link.b24ui?.link, link.class], active })">
            <slot name="link" :link="link" :active="active" :b24ui="b24ui">
              <div data-slot="linkWrapper" :class="b24ui.linkWrapper({ class: [props.b24ui?.linkWrapper, link.b24ui?.linkWrapper], active })">
                <slot name="link-leading" :link="link" :active="active" :b24ui="b24ui">
                  <Component
                    :is="link.icon"
                    v-if="link.icon"
                    data-slot="linkLeadingIcon"
                    :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, link.b24ui?.linkLeadingIcon], active })"
                  />
                </slot>

                <div v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, link.b24ui?.linkLabel], active })">
                  <slot name="link-label" :link="link" :active="active">
                    {{ link.label }}
                  </slot>
                </div>
              </div>
              <Component
                :is="icons.external"
                v-if="link.target === '_blank'"
                data-slot="linkLabelExternalIcon"
                :class="b24ui.linkLabelExternalIcon({ class: [props.b24ui?.linkLabelExternalIcon, link.b24ui?.linkLabelExternalIcon], active })"
              />

              <slot name="link-trailing" :link="link" :active="active" />
            </slot>
          </B24LinkBase>
        </B24Link>
      </li>
    </ul>
  </Primitive>
</template>
