<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 : {
            default : null,
            type : String,
        },
        theme : {
            default: null,
            type : String,
        },
        link : {
            default : null,
            type : String,
        },
        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() {
            if (this.theme === 'success') {
                return 'border border-transparent text-white bg-green-500 '
                    + 'hover:bg-green-600 focus:border-green-700 active:bg-green-700';
            }
            if (this.theme === 'warning') {
                return 'border border-transparent text-white bg-yellow-500 '
                    + 'hover:bg-yellow-600 focus:border-yellow-700 active:bg-yellow-700';
            }
            if (this.theme === 'danger') {
                return 'border border-transparent text-white bg-red-500 '
                    + 'hover:bg-red-600 focus:border-red-700 active:bg-red-700';
            }
            return 'border border-gray-300 text-gray-700 bg-white '
                + 'hover:text-gray-500 active:text-gray-800 active:bg-gray-50';
        }
    },
}
</script>
