<template>
  <button
    ref="buttonRef"
    :type="type"
    :class="['btn', `btn-${variant}`, { 'btn-sm': size === 'sm', 'btn-lg': size === 'lg' }]"
    :disabled="disabled || loading"
    @click="$emit('click', $event)"
  >
    <span v-if="loading" class="spinner"></span>
    <slot></slot>
  </button>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'button'
  },
  variant: {
    type: String,
    default: 'primary'
    // primary, secondary, danger, success, warning
  },
  size: {
    type: String,
    default: 'md'
    // sm, md, lg
  },
  disabled: Boolean,
  loading: Boolean
})

defineEmits(['click'])

const buttonRef = ref(null)

const focus = () => {
  buttonRef.value?.focus()
}

defineExpose({ focus })
</script>

<style scoped>
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 16px;
}

.btn-primary {
  background: #3498db;
  color: white;
}
.btn-primary:hover:not(:disabled) {
  background: #2980b9;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}
.btn-secondary:hover:not(:disabled) {
  background: #5a6268;
}

.btn-danger {
  background: #e74c3c;
  color: white;
}
.btn-danger:hover:not(:disabled) {
  background: #c0392b;
}

.btn-success {
  background: #27ae60;
  color: white;
}
.btn-success:hover:not(:disabled) {
  background: #1e8449;
}

.btn-warning {
  background: #f39c12;
  color: white;
}
.btn-warning:hover:not(:disabled) {
  background: #d68910;
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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