<script setup>
import { ref, watch } from 'vue';

defineProps({
    type: {
        type: String,
        default: 'submit',
    },
    bgcolor: {
        type: String,
        default: 'bg-blue-500'
    },
    // Optional text color utility class (e.g., 'text-white', 'text-gray-800').
    // Left empty by default because the base class already includes 'text-white'.
    color: {
        type: String,
        default: ''
    },
});

const isHover = ref(false);

watch(
    () => isHover.value,
    (isHover) => {
        console.log(isHover)
    }
)

</script>

<template>
    <button :type="type" class="inline-flex items-center px-4 py-2 bg-blue-500 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 focus:bg-blue-700 active:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 transition ease-in-out duration-150" :class="[bgcolor, color]">
        <slot />
    </button>
</template>