<script setup lang="ts">
withDefaults(
  defineProps<{
    type?: "button" | "submit";
    variant?: "primary" | "ghost";
    loading?: boolean;
    disabled?: boolean;
  }>(),
  { type: "button", variant: "primary", loading: false, disabled: false },
);
</script>

<template>
  <button
    :type="type"
    :disabled="disabled || loading"
    class="inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold transition
           focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2
           focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-offset-neutral-950
           disabled:cursor-not-allowed disabled:opacity-60"
    :class="
      variant === 'primary'
        ? 'bg-brand text-neutral-900 shadow-sm hover:bg-brand-600 active:bg-brand-700'
        : 'text-neutral-700 hover:bg-neutral-200/70 dark:text-neutral-200 dark:hover:bg-neutral-800'
    "
  >
    <span
      v-if="loading"
      class="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
      aria-hidden="true"
    />
    <slot />
  </button>
</template>
