<template>
  <button 
    :class="[baseStyles, variantStyles, className]"
    v-bind="$attrs"
  >
    <slot />
  </button>
</template>

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

interface Props {
  variant?: 'primary' | 'secondary' | 'danger';
  className?: string;
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  className: ''
});

const baseStyles = "relative px-4 py-2 text-xs font-bold uppercase tracking-wider border-2 transition-transform active:translate-y-1";

const variantStyles = computed(() => {
  if (props.variant === 'primary') {
    return "bg-[#2b193f] border-[#f6b26b] text-[#f6b26b] hover:bg-[#3d2459] hover:text-white";
  } else if (props.variant === 'secondary') {
    return "bg-[#1b1026] border-[#4a3b5e] text-[#8f80a0] hover:bg-[#2b193f] hover:text-[#e0d8f0]";
  } else if (props.variant === 'danger') {
    return "bg-[#2b193f] border-[#d95763] text-[#d95763] hover:bg-[#3d2459] hover:text-white";
  }
  return "";
});
</script>
