<!-- Link component -->
<script setup lang="ts">
import { computed } from 'vue';
import IconLink from '../icons/IconLink.vue';

// Props with default values
const {
    title,
    href,
    target,
    type = 'primary',
    hasIcon = false,
    iconPosition = 'left',
    hasUnderline = false,
    disabled = false,
} = defineProps<{
    title: string;
    href: string;
    target?: '_self' | '_blank' | '_parent' | '_top';
    type?: 'primary' | 'danger' | 'secondary';
    hasIcon?: boolean;
    iconPosition?: 'left' | 'right';
    hasUnderline?: boolean;
    disabled?: boolean;
}>();

// Computed classes for the link
const classes = computed(() => {
    let baseClasses = ['link'];

    // Type
    baseClasses.push(`link-${type}`);

    // Underline
    if (hasUnderline) {
        baseClasses.push('has-underline');
    }

    // Disabled
    if (disabled) {
        baseClasses.push('disabled');
    }

    // Icon left
    if (iconPosition === 'right') {
        baseClasses.push('icon-right');
    }

    return baseClasses.join(' ');
});
</script>

<template>
    <a :class="classes" :href :target :disabled="disabled ?? false">
        <IconLink v-if="hasIcon" />

        {{ title }}
    </a>
</template>

<style lang="scss" scoped>
.link {
    @apply inline-flex items-center gap-1.5 font-medium transition-colors;

    &.icon-right {
        @apply flex-row-reverse;
    }

    &.has-underline {
        @apply border-b border-transparent hover:border-current;
    }

    &.link-primary {
        @apply text-primary-500 hover:text-primary-300;

        &.disabled {
            @apply text-primary-100;
        }
    }

    &.link-danger {
        @apply text-danger-500 hover:text-danger-300;

        &.disabled {
            @apply text-danger-100;
        }
    }

    &.link-secondary {
        @apply text-base-500 hover:text-primary-500;

        &.disabled {
            @apply text-neutral-300;
        }
    }

    &.disabled {
        @apply pointer-events-none;
    }
}
</style>
