<script setup lang="ts">
import { computed } from 'vue'
import LaurelSpinner from './LaurelSpinner.vue'

const props = withDefaults(
  defineProps<{
    severity?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'
    size?: 'small' | 'normal' | 'large'
    loading?: boolean
    disabled?: boolean
  }>(),
  {
    severity: 'primary',
    size: 'normal',
    loading: false,
    disabled: false,
  },
)

const dataP = computed(() => [props.size, props.loading ? 'loading' : null].filter(Boolean).join(' '))
</script>

<template>
  <button
    :class="`nych-button nych-button-${severity}`"
    :data-p="dataP"
    :disabled="disabled || loading"
  >
    <LaurelSpinner v-if="loading" :size="20" />
    <slot v-if="!loading" name="icon" />
    <span><slot /></span>
  </button>
</template>
