<template>
  <button
    :disabled="disabled"
    :class="variantClass"
    @click="$emit('click')"
  >
    <slot v-if="!loading"></slot>
    <slot name="spinner" v-else>
      <UiSpinnerCpnt />
    </slot>
  </button>
</template>

<script setup lang="ts">
defineEmits(['click'])

const props = defineProps<{
  disabled?: boolean
  loading?: boolean
  variant?: 'primary' | 'secondary'
}>()

const variantClass = computed(() => props.variant === 'secondary' ? 'secondary' : 'primary')
</script>

<style scoped lang="scss">
@use "sass:color";

button {
  margin: 5px 0 2.3em 0;
  width: 100%;
  padding: 1em 1.5em;
  border-radius: 0.5em;
  color: white;
  font-weight: bold;
  border: none;
  box-sizing: border-box;
  transition: 0.3s;
  background: blueviolet;
  text-align: center;
  &:hover {
    cursor: pointer;
    color: color.adjust(blueviolet, $lightness: 15%);
  }

  &:disabled {
    background: #bbb;
    cursor: not-allowed;
  }

  > div {
    margin: auto;
  }
}

/* Variants */
button.secondary {
  background: gray;

  &:hover {
    color: color.adjust(gray, $lightness: 15%);
  }
}
</style>
