<script setup>
import { computed } from 'vue';
import { cn } from '@/lib/utils';

const props = defineProps({
  variant: {
    type: String,
    default: 'default',
    validator: (v) => ['default', 'ghost', 'outline', 'danger', 'success', 'link'].includes(v)
  },
  size: {
    type: String,
    default: 'default',
    validator: (v) => ['default', 'sm', 'lg', 'icon'].includes(v)
  },
  disabled: Boolean,
  loading: Boolean,
  class: String
});

const variantClasses = {
  default: 'glass glass-border hover:bg-white/5',
  ghost: 'hover:bg-white/5',
  outline: 'border border-border bg-transparent hover:bg-white/5',
  danger: 'glass glass-border hover:border-red-400/30 hover:text-red-400',
  success: 'glass glass-border hover:border-green-400/30 hover:text-green-400',
  link: 'underline-offset-4 hover:underline text-accent'
};

const sizeClasses = {
  default: 'h-9 px-3 py-2',
  sm: 'h-8 px-2.5 text-xs',
  lg: 'h-10 px-4',
  icon: 'h-9 w-9 p-0'
};

const classes = computed(() => cn(
  'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-50',
  variantClasses[props.variant],
  sizeClasses[props.size],
  props.class
));
</script>

<template>
  <button
    :class="classes"
    :disabled="disabled || loading"
  >
    <svg v-if="loading" class="size-4 animate-spin" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25" />
      <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" class="opacity-75" />
    </svg>
    <slot />
  </button>
</template>
