<script setup lang="ts">
import { ButtonSize } from '../types';

interface Props {
  click: (payload?: MouseEvent) => void;
  size?: ButtonSize;
  active: boolean;
}

withDefaults(defineProps<Props>(), {
  size: ButtonSize.Medium,
  active: false,
})
</script>

<template>
  <button
    :class="{
      button: true,
      'button--small': size === ButtonSize.Small,
      'active': active === true,
    }"
    @click="click"
  >
    <slot></slot>
  </button>
</template>

<style scoped>
.button {
  border-radius: 10px;
  margin: 5px;
  padding: 10px;
  color: #22333B;
  background-color: #EAE0D5;
  border: 1px solid #5E503F;
  width: 100%;
}

.button:hover {
  background-color: #d7c7b6;
}

.button--small {
  border-radius: 3px;
  margin: 3px;
  padding: 2px 10px;
  font-size: 10pt;
  width: auto;
}

.active {
  background-color: #ffce99;
}
</style>
