<template>
  <button
    class="chad-button"
    :data-loading="loading || undefined"
    :disabled="disabled"
    :type="type"
    :data-full="full || undefined"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
defineOptions({
  name: 'ChadButton',
})

withDefaults(
  defineProps<Props>(),
  {
    type: 'button',
  },
)

interface Props {
  loading?: boolean
  disabled?: boolean
  type?: 'button' | 'submit'
  full?: boolean
}
</script>

<style lang="scss">
.chad-button {
  border: none;
  color: var(--bg-dark);
  border-radius: 12px;
  padding-inline: 12px;
  height: 44px;
  background-color: var(--primary);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition-property: color, background-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  outline: none;

  &[data-full] {
    width: 100%;
  }

  &:hover,
  &:focus,
  &:active {
    background-color: var(--secondary);
  }
}
</style>
