<template>
  <button class="btn" :class="classes" :type="type" :disabled="disabled" @click="emit('click', $event)">
    <slot>{{ label }}</slot>
  </button>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue';

const props = defineProps({
  type: {
    type: String as PropType<'button' | 'submit' | 'reset'>,
    default: 'button',
  },
  label: String,
  disabled: {
    type: Boolean,
    default: false,
  },
  large: {
    type: Boolean,
    default: false,
  },
  small: {
    type: Boolean,
    default: false,
  },
  color: {
    type: String,
    default: 'primary',
  },
  outline: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['click']);

const classes = computed(() => {
  return {
    disabled: props.disabled,
    'btn-lg': props.large,
    'btn-sm': props.small,
    [`btn-${props.color}`]: !props.outline,
    [`btn-${props.color}-outline`]: props.outline,
  };
});
</script>
