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

export type ButtonTheme = 'primary' | 'secondary'
export type ButtonType = 'button' | 'submit' | 'reset'
export type ButtonSize = 'sm' | 'md' | 'lg'

interface Props {
  theme?: ButtonTheme
  size?: ButtonSize
  icon?: string
  type?: ButtonType
  disabled?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  buttonStyle: 'primary',
  buttonType: 'button',
  size: 'md',
  disabled: false,
})
defineEmits(['click'])

const buttonStyle = computed(() => ({
  'app-button-theme-secondary': props.theme === 'secondary',
  'app-button-disabled': props.disabled,
  'app-button-size-sm': props.size === 'sm',
  'app-button-size-lg': props.size === 'lg',
}))
</script>
<template>
  <button
    class="app-button"
    :class="buttonStyle"
    :type="type ?? 'button'"
    :disabled="disabled"
    @click="$emit('click')"
  >
    <span v-if="icon">
      <font-awesome-icon
        :icon="'fa-' + icon"
        :class="{
          'app-button-icon-with-text': $slots.default !== undefined,
          'app-button-icon-without-text': $slots.default === undefined,
        }"
      ></font-awesome-icon>
    </span>
    <slot></slot>
  </button>
</template>
<style lang="css">
.app-button {
  background-color: #111827;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  flex: 0 0 auto;
  font-family: 'OpenSans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1rem;
  padding: 0.75rem 1.5rem;
  text-align: center;
  text-decoration: none #6b7280 solid;
  text-decoration-thickness: auto;
  transition-duration: 0.2s;
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto;
  margin: 0.25rem;
}

.app-button-disabled {
  color: #686868;
  cursor: inherit;
}

.app-button-size-sm {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
}

.app-button-size-lg {
  padding: 1rem 2rem;
  font-size: 1.2rem;
}

.app-button:hover:not(.app-button-disabled) {
  background-color: #374151;
}

.app-button:focus {
  box-shadow: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.app-button:active:not(.app-button-disabled) {
  background-color: #3b4968;
}

.app-button-theme-secondary {
  background-color: #1d2330;
}

.app-button-icon-with-text {
  margin-right: 0.5rem;
  margin-left: -0.5rem;
}

.app-button-icon-without-text {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
</style>
