<script setup>
import { computed } from "vue";
import { Link } from "@inertiajs/inertia-vue3";

const props = defineProps({
    href: String,
    navigate: String,
    active: Boolean,
});

const classes = computed(() => {
    return props.active
        ? "inline-flex items-center px-4 my-auto py-1.5 border-b-2 border-transparent text-sm font-medium leading-5 text-white rounded-lg transition bg-blue-300"
        : "inline-flex items-center px-4 my-auto py-1.5 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-300 rounded-lg focus:outline-none focus:border-transparent transition";
});
</script>

<template>
    <a :href="navigate" :class="classes" v-if="navigate">
        <slot />
    </a>
    <Link v-else :class="classes" :href="href">
        <slot />
    </Link>
</template>
