<script setup lang="ts">
import type { AcfLinkFragment } from "#graphql/operations";
import type { LinkProps } from "@nuxt/ui";

type AcfLinkProps = Omit<LinkProps, "to" | "target" | "href"> & {
  link?: AcfLinkFragment;
};

const { link, ...linkProps } = defineProps<AcfLinkProps>();
</script>

<template>
  <ULink
    v-if="link?.url && link?.title"
    v-bind="linkProps"
    :to="link.url"
    :target="link.target"
    :external="link.target === '_blank'"
    :rel="link.target === '_blank' ? 'noopener noreferrer' : undefined"
  >
    <slot>{{ link.title }}</slot>
  </ULink>
</template>
