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

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

withDefaults(
  defineProps<{
    icon: string
    title?: string
    size?: 'md' | 'sm'
    variant?: 'default' | 'danger'
    loading?: boolean
    disabled?: boolean
  }>(),
  {
    size: 'md',
    variant: 'default',
    loading: false,
    disabled: false,
  },
)

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

<style lang="scss" scoped>
.vm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;

  &.is-md {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  &.is-sm {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 14px;
  }

  &:hover:not(:disabled) {
    background: var(--muted);
    color: var(--foreground);
  }

  &.is-danger:hover:not(:disabled) {
    background: var(--danger-soft);
    color: var(--danger);
  }

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

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

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