<template>
  <button
    class="base-button"
    :class="[buttonClasses, { 'is-loading': loading }]"
    :disabled="disabled || loading"
    @click="$emit('click')"
    type="button"
  >
    <template v-if="loading">
      <span class="loading-spinner"></span>
    </template>
    <template v-else-if="hasIcon">
      <span class="button-icon">
        <slot name="icon"></slot>
      </span>
    </template>
    <span class="button-text">
      <slot>Connect</slot>
    </span>
  </button>
</template>
<script setup>
import { computed, useSlots } from 'vue'
const slots = useSlots()
const props = defineProps({
  variant: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'ghost', 'danger', 'success', 'slate'].includes(value)
  },
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const hasIcon = computed(() => !!slots.icon)
const buttonClasses = computed(() => ({
  [`variant-${props.variant}`]: true,
  [`size-${props.size}`]: true,
  'with-icon': hasIcon.value
}))
defineEmits(['click'])
</script>
<style scoped>
.base-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: background-color 200ms;
  cursor: pointer;
  font-weight: 500;
}
.base-button:hover {
  background-color: var(--color-primary-hover);
}

.variant-primary{
  background-color: var(--color-primary);
  color: white;
}

.variant-primary:hover{
  background-color: var(--color-primary-hover);
}

.variant-secondary {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

.variant-secondary:hover{
  background-color: var(--color-primary-hover);
}

.variant-ghost {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.variant-ghost:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
  transition: background-color 200ms ease-in-out;
}

.variant-slate{
  background-color: transparent;
  color: var(--color-bright-blue);
  border: 1px solid var(--color-bright-blue);
}

.variant-slate:hover{
  background-color: var(--color-bright-blue);
  color: white;
}
.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spinner-rotate 0.6s linear infinite;
}

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

/* Disabled state */
.base-button:disabled {
  background-color: #e5e7eb;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: not-allowed;
  opacity: 0.6;
}

.base-button:disabled:hover {
  background-color: #e5e7eb;
  color: #9ca3af;
  border-color: #e5e7eb;
}

/* 🔹 Mobile Optimization */
@media (max-width: 480px) {
  .toggle-container {
    width: 4rem;
    height: 2rem;
  }
}
</style>