<script setup lang="ts">
import Button from 'primevue/button'
import type { UiButtonType, UiSeverity } from '../contracts'

withDefaults(defineProps<{
  label?: string
  severity?: UiSeverity
  type?: UiButtonType
  disabled?: boolean
  loading?: boolean
}>(), { severity: 'primary', type: 'button', disabled: false, loading: false })

defineEmits<{ activate: [event: MouseEvent] }>()
</script>

<template>
  <Button
    class="ks-button"
    :label="label"
    :severity="severity"
    :type="type"
    :disabled="disabled"
    :loading="loading"
    @click="$emit('activate', $event)"
  >
    <slot />
  </Button>
</template>

<style scoped>
.ks-button { min-height: var(--ks-control-height); padding: 0 var(--ks-space-4); border: 0; border-radius: var(--ks-radius-sm); background: var(--ks-color-action); color: #fff; font-weight: 650; cursor: pointer; }
.ks-button:hover:not(:disabled) { background: var(--ks-color-action-hover); }
.ks-button:disabled { opacity: .55; cursor: not-allowed; }
</style>
