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

// Props with default values
const {
    url = '#',
    text = '',
    target = '_self',
    type = 'primary',
    size = 'default',
    iconPosition = 'right',
    style = 'default',
    hasBackground = true,
    disabled = false,
    loading = false,
} = defineProps<{
    url?: string;
    text?: string;
    target?: '_self' | '_blank' | '_parent' | '_top';
    type?: 'primary' | 'danger' | 'secondary';
    size?: 'default' | 'large' | 'small';
    iconPosition?: 'left' | 'right';
    style?: 'default' | 'circle';
    hasBackground?: boolean;
    disabled?: boolean;
    loading?: boolean;
}>();

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

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

    // Size
    baseClasses.push(`size-${size}`);

    // Style
    baseClasses.push(`style-${style}`);

    // Background
    if (hasBackground) {
        baseClasses.push('btn-bg');
    } else {
        baseClasses.push('btn-no-bg');
    }

    // Loading
    if (loading || disabled) {
        baseClasses.push('disabled');
    }

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

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

<template>
    <a :class="classes" :href="url" :target="target" :disabled="disabled ?? false">
        <span v-if="text">{{ text }}</span>

        <!-- Loading icon -->
        <IconLoading v-if="loading" />
        <!-- Icon slot -->
        <slot v-else></slot>
    </a>
</template>

<style lang="scss" scoped>
.btn {
    @apply inline-flex items-center justify-center gap-1.5 rounded-lg border font-medium transition-all;

    &:focus {
        @apply outline-none shadow-none;
    }

    &:focus-visible {
        @apply outline-none ring-2 ring-primary-500 ring-offset-2;
    }

    &.btn-bg {
        &.btn-primary {
            @apply bg-primary-500 text-white border-primary-500 hover:text-white hover:bg-primary-300 hover:border-primary-300 active:bg-primary-900 active:border-primary-900;

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

        &.btn-danger {
            @apply bg-danger-500 text-white border-danger-500 hover:text-white hover:bg-danger-300 hover:border-danger-300 active:bg-danger-900 active:border-danger-900;

            &.disabled {
                @apply text-white bg-danger-100 border-neutral-300;
            }
        }

        &.btn-secondary {
            @apply bg-white text-primary-500 border-neutral-500 hover:text-primary-500 hover:bg-primary-50 hover:border-primary-100 active:bg-primary-50 active:border-primary-500;

            &.disabled {
                @apply text-base-100 bg-neutral-50 border-neutral-500;
            }
        }
    }

    &.btn-no-bg {
        @apply border-transparent;

        &.style-default {
            &.btn-primary {
                @apply text-primary-500 hover:text-primary-300 active:text-primary-900;

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

            &.btn-danger {
                @apply text-danger-500 hover:text-danger-300 active:text-danger-900;

                &.disabled {
                    @apply text-base-200;
                }
            }

            &.btn-secondary {
                @apply text-base-500 hover:text-primary-500 active:text-base-900;

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

        &.style-circle {
            &.btn-primary {
                @apply rounded-full text-primary-500 hover:bg-primary-50 hover:text-primary-500 active:bg-primary-50;

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

            &.btn-danger {
                @apply rounded-full text-danger-500 hover:bg-danger-50 hover:text-danger-500 active:bg-danger-50;

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

            &.btn-secondary {
                @apply rounded-full text-base-500 hover:bg-neutral-400 hover:text-base-500;

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

    &.size-default {
        &.style-default {
            @apply text-base leading-base px-4 py-[5px];
        }

        &.style-circle {
            @apply px-0 py-0 size-8;
        }
    }

    &.size-large {
        &.style-default {
            @apply text-base leading-base px-4 md:px-5 py-[5px] md:py-[9px];
        }

        &.style-circle {
            @apply px-0 py-0 size-10;
        }
    }

    &.size-small {
        &.style-default {
            @apply text-xs leading-xs px-3 py-0.5;
        }

        &.style-circle {
            @apply px-0 py-0 size-6;
        }
    }

    &.disabled {
        @apply pointer-events-none;
    }

    &.icon-left {
        @apply flex-row-reverse;
    }
}
</style>
