<template>
  <div class="flex flex-row items-center mt-2 mb-2">
  <NuxtLink :to="to || href" :target="(blank && '_blank') || target">
    <UButton :variant="variant" :size="size" :icon="icon" :trailing-icon="trailingIcon" class="min-h-10 max-h-12">
      <slot/>
    </UButton>
  </NuxtLink>
</div>
</template>

<script setup lang="ts">
type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;

defineProps<{
  variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  color?: 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white' | 'black';
  icon?: string;
  to?: string;
  href?: string;
  target?: Target;
  trailingIcon?: string;
  blank?: boolean;
}>();
</script>
