<template>
  <button
    type="button"
    class="vm-action-btn"
    :class="[`is-${variant}`, `is-${size}`]"
    :disabled="disabled || loading"
    @click="emit('click', $event)"
  >
    <i v-if="icon" :class="[icon, { 'is-spin': loading }]" aria-hidden="true" />
    <span>{{ loading && loadingText ? loadingText : label }}</span>
  </button>
</template>

<script setup lang="ts">
defineOptions({ name: 'vm-action-btn' })

withDefaults(
  defineProps<{
    label?: string
    loadingText?: string
    icon?: string
    variant?: 'default' | 'primary' | 'success' | 'brand' | 'danger' | 'outline'
    size?: 'md' | 'sm'
    loading?: boolean
    disabled?: boolean
  }>(),
  {
    label: '',
    variant: 'default',
    size: 'md',
    loading: false,
    disabled: false,
  },
)

const emit = defineEmits<{
  click: [e: MouseEvent]
}>()
</script>

<style lang="scss" scoped>
.vm-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 12px;
  background: var(--muted);
  color: var(--foreground);
  font-weight: 600;
  cursor: pointer;

  &.is-md {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }

  &.is-sm {
    height: 26px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
  }

  &:hover:not(:disabled) {
    background: color-mix(in srgb, var(--foreground) 8%, var(--muted));
  }

  &.is-outline {
    border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
    background: var(--card);

    &:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--brand) 40%, transparent);
      background: var(--card);
      color: var(--brand);
    }
  }

  &.is-primary {
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;

    &:hover:not(:disabled) {
      background: var(--brand-deep);
      color: #fff;
    }
  }

  &.is-success {
    border: 1px solid var(--success);
    background: var(--success);
    color: #fff;

    &:hover:not(:disabled) {
      filter: brightness(0.95);
      color: #fff;
    }
  }

  &.is-brand {
    background: color-mix(in srgb, var(--brand) 12%, var(--card));
    color: var(--brand);

    &:hover:not(:disabled) {
      background: color-mix(in srgb, var(--brand) 20%, var(--card));
    }
  }

  &.is-danger {
    background: var(--danger-soft);
    color: var(--danger);

    &:hover:not(:disabled) {
      background: color-mix(in srgb, var(--danger) 16%, var(--card));
    }
  }

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

  i.is-spin {
    animation: vm-action-spin 0.8s linear infinite;
  }
}

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