<script setup lang="ts">
defineProps<{
  variant?: 'primary' | 'ghost' | 'text'
  size?: 'sm' | 'md' | 'lg'
  loading?: boolean
  disabled?: boolean
  block?: boolean
  pill?: boolean
}>()
</script>

<template>
  <button
    class="app-btn"
    :class="[
      `app-btn--${variant ?? 'primary'}`,
      `app-btn--${size ?? 'md'}`,
      { 'app-btn--block': block, 'app-btn--loading': loading, 'app-btn--pill': pill }
    ]"
    :disabled="disabled || loading"
  >
    <span v-if="loading" class="app-btn__spinner" />
    <slot />
  </button>
</template>

<style scoped>
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.app-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.app-btn--block   { width: 100%; }

/* ── Sizes ── */
.app-btn--sm { padding: 6px 14px;  font-size: var(--text-caption); height: 32px; }
.app-btn--md { padding: 10px 20px; font-size: var(--text-small);   height: 44px; }
.app-btn--lg { padding: 14px 24px; font-size: var(--text-body);    height: 52px; }

/* ── Variants ── */
.app-btn--primary {
  background: var(--color-primary);
  color: #000;
}
.app-btn--primary:not(:disabled):hover {
  background: var(--color-primary-hover);
}

.app-btn--ghost {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.app-btn--ghost:not(:disabled):hover {
  background: rgba(var(--color-primary-rgb), 0.1);
}

.app-btn--text {
  background: transparent;
  color: var(--color-primary);
  padding-left: 0;
  padding-right: 0;
}
.app-btn--text:not(:disabled):hover { opacity: 0.8; }

/* ── Spinner ── */
.app-btn__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.app-btn--pill { border-radius: 999px; }
</style>
