<script setup>
defineProps({
  variant: { type: String, default: 'default' },
  type: { type: String, default: 'button' }
})
</script>

<template>
  <button
    :type="type"
    class="inline-flex h-10 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
    :class="variant === 'outline' ? 'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50' : 'bg-primary text-white shadow-sm hover:bg-blue-600'"
  >
    <slot />
  </button>
</template>
