<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" :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: .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: .75rem 1.5rem;
  text-align: center;
  text-decoration: none #6B7280 solid;
  text-decoration-thickness: auto;
  transition-duration: .2s;
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(.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>
