<template>
  <button
    :class="[
      'inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm',
      'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
      classes,
    ]"
    :type="buttonType"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = withDefaults(
  defineProps<{
    buttonType?: 'submit' | 'button';
    variant?: 'primary' | 'secondary' | 'tertiary';
  }>(),
  { buttonType: 'button', variant: 'primary' }
);

const classes = computed(() => {
  if (!props.variant || props.variant === 'primary')
    return 'bg-green-600 hover:bg-green-700 text-white';
});
</script>
