<script setup>
import { props } from "./BaseProps.js";
import { computed } from "vue";
const defines = defineProps(props);
const baseClass =
  "flex items-center justify-center px-4 py-2 border border-transparent rounded-md font-semibold text-white text-xs tracking-widest transition ease-in-out duration-150";

const baseClassList = computed(() => {
  return defines.disabled
    ? baseClass +
        " !hover:bg-gray-300 !hover:text-gray-400 !bg-gray-300 !text-gray-400 cursor-not-allowed shadow"
    : baseClass;
});
</script>
<template>
  <button
    v-if="link === ''"
    :disabled="disabled"
    :type="type"
    :class="`${baseClassList} ${classList}`"
  >
    <slot />
  </button>

  <a
    v-else
    :href="link"
    :class="`${baseClassList} ${classList} ${disabled ? 'cursor-not-allowed	pointer-events-none' : ''}`"
    :target="target"
    ><slot
  /></a>
</template>
