<template>
    <span class="inline-flex rounded-md shadow-sm">
        <component :is="type" :href="link" :class="[defaultClass, sizeClass, styleClass]" :target="target">
            <slot></slot>
        </component>
    </span>
</template>

<script>
export default {
    props : {
        type : {
            default : 'a',
        },
        size : {
            type : String,
        },
        theme : {
            type : String,
        },
        link : {
            default : null
        },
        target : {
            default : '_self',
            type : String,
        },
    },
    computed : {
        defaultClass() {
            return 'inline-flex items-center leading-4 font-medium rounded '
                + 'transition ease-in-out duration-150 '
                + 'focus:outline-none focus:border-blue-300 focus:shadow-outline-blue';
        },
        sizeClass() {
            return 'px-2.5 py-1.5 text-xs';
        },
        styleClass() {
            return 'border border-gray-300 text-gray-700 bg-white hover:text-gray-500 active:text-gray-800 active:bg-gray-50';
        }
    },
}
</script>
