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

type AcfLinkButtonProps = & Omit<ButtonProps, "to" | "target" | "href"> & {
  link?: AcfLinkFragment;
  showLabel?: boolean;
};

const { link, showLabel, ...buttonProps } = defineProps<AcfLinkButtonProps>();
</script>

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