<template>
  <component
    :is="tag"
    :type="tag === 'button' ? type : undefined"
    :disabled="disabled || loading"
    :class="['btn', `btn--${variant}`, { 'btn--loading': loading }]"
    v-bind="$attrs"
  >
    <span v-if="loading" class="btn__spinner" aria-hidden="true" />
    <slot />
  </component>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'icon-pill'
  tag?: 'button' | 'a' | 'router-link'
  type?: 'button' | 'submit' | 'reset'
  disabled?: boolean
  loading?: boolean
}>(), {
  variant: 'primary',
  tag: 'button',
  type: 'button',
  disabled: false,
  loading: false,
})
</script>

<style scoped lang="scss">
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  &:not(:disabled):active {
    transform: scale(0.96);
  }

  &--primary {
    background: var(--color-primary);
    color: var(--color-primary-fg);
  }

  &--secondary {
    background: var(--color-secondary);
    color: var(--color-secondary-fg);
    border: 1px solid var(--color-border);
  }

  &--ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
  }

  &--destructive {
    background: var(--color-destructive);
    color: var(--color-destructive-fg);
  }

  &--icon-pill {
    width: var(--touch-min);
    padding: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-text);
  }

  &__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>
