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

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

const classes = computed(() => {
    return props.active
        ? 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-blue-300 bg-blue-100/50 focus:outline-none focus:text-blue-300 focus:bg-blue-100/50 focus:border-transparent transition'
        : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-100/50 hover:border-transparent focus:outline-none focus:text-gray-700 focus:bg-gray-100/50 focus:border-transparent transition';
});
</script>

<template>
    <div>
        <button v-if="as == 'button'" :class="classes" class="w-full text-left">
            <slot/>
        </button>

        <Link v-else :class="classes" :href="href">
            <slot/>
        </Link>
    </div>
</template>
