<template>
  <button
    :id="idtext"
    :value="value"
    :class="computedClass"
    v-bind="additionalData"
    @click="handleClick"
  >
    <img v-if="img" :src="img" class="btn-icon" />
    <slot>{{ content }}</slot>
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  content: { type: String, default: '' },
  value: { type: [String, Number], default: '' },
  idtext: { type: String, default: '' },
  btnClass: { type: String, default: '' }, // custom classes
  block: { type: Boolean, default: false },
  img: { type: String, default: '' },
  additionalData: { type: Object, default: () => ({}) },
  onClick: { type: Function, default: null }
})

const computedClass = computed(() => {
  return `${props.btnClass} ${props.block ? 'btn-block' : ''}`.trim()
})

function handleClick(event) {
  if (props.onClick) props.onClick(event)
}
</script>

<style scoped>
.btn-icon {
  margin-right: 0.5rem;
  height: 1em;
}
</style>
