<script setup lang="ts">
import Button from 'primevue/button';
import type IVLink from '@/components/button/IVLink.type';
import { computed } from 'vue';
import styles from '@/assets/typography.module.css'

const props = defineProps<IVLink>();

// Icon position computed
const iconPos = computed<string>(() => {
    return props.iconRight ? 'right': 'left'
})

// Change the html tag of root element
const htmlTag = computed(() => { return props.to ? 'RouterLink' : props.href ? 'a' : 'button'})
</script>

<template>
    <Button
        variant="link"
        role="link"
        :label="props.label"
        :aria-label="props.label"
        :icon="props.icon"
        :disabled="props.disabled"
        :aria-disabled="props.disabled"
        :icon-pos="iconPos"
        :as="htmlTag"
        :href="props.href"
        :target="props.target"
        :to="props.to"
        :tabindex="props.disabled ? -1 : 0"
        @click="props.disabled && $event.preventDefault()"
        class="p-button"
        :class="[styles['text-body-MD-standard-text-Regular']]"
        :style="props.disabled ? { pointerEvents: 'none' } : {}"
    />
</template>

<style lang="css" scoped>
*{
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}

.p-button.p-button-link:hover{
  border: 2px solid var(--p-button-link-color);
}
</style>
