<script setup lang="ts">
withDefaults(defineProps<{
  label: string
  variant?: 'primary' | 'secondary' | 'danger'
  disabled?: boolean
  busy?: boolean
}>(), { variant: 'primary' })

defineEmits<{ click: [] }>()
</script>

<template>
  <button
    class="action"
    :class="variant"
    type="button"
    :disabled="disabled || busy"
    @click="$emit('click')"
  >
    {{ busy ? '처리 중...' : label }}
  </button>
</template>

<style scoped>
.action { width:100%; min-height:var(--kbx-control-touch); border-radius:var(--kbx-radius-md); border:var(--kbx-border-width) solid transparent; font-size:var(--kbx-font-lg); font-weight:600; padding:var(--kbx-space-2) var(--kbx-space-4); }
.primary { color:var(--kbx-color-surface); background:var(--kbx-color-primary); }
.secondary { color:var(--kbx-color-text); background:var(--kbx-color-surface); border-color:var(--kbx-color-border); }
.danger { color:var(--kbx-color-surface); background:var(--kbx-color-danger); }
.action:disabled { opacity:.55; cursor:not-allowed; }
</style>
