<template>
  <button
    class="chad-button"
    :data-loading="loading || undefined"
    :data-disabled="disabled || undefined"
    :disabled="disabled"
    :type="type"
    :data-full="full || undefined"
  >
    <ChadSpinner v-if="loading" class="chad-button__spinner" />
    <slot v-else />
  </button>
</template>

<script setup lang="ts">
import ChadSpinner from '@shared/components/ui/Spinner.vue'

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 {
  @include font-display-14;

  flex-shrink: 0;
  border: none;
  color: var(--ink);
  padding-inline: var(--space-3);
  height: 44px;
  background-color: var(--yellow);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  outline: var(--border-w) solid var(--ink);
  outline-offset: calc(var(--border-w) * -1);

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

  &:hover,
  &:focus {
    background-color: var(--yellow-deep);
  }

  &:active {
    background-color: var(--ink);
    color: var(--yellow);
  }

  &[data-disabled],
  &:disabled {
    cursor: not-allowed;
    background-color: var(--grey-1);
    color: var(--grey-3);
  }

  &[data-loading] {
    background-color: var(--grey-1);
    cursor: wait;
  }
}
</style>
