<template>
  <Component :is="tag" class="app-button" v-bind="attrs">
    <slot />
  </Component>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'AppButton',
})

const props = defineProps<{
  href?: string
}>()

const isLink = computed(() => !!props.href)
const tag = computed(() => isLink.value ? 'a' : 'button')
const attrs = computed(() => {
  if (isLink.value) {
    return {
      href: props.href,
    }
  }
  else {
    return {
      type: 'button',
    }
  }
})
</script>

<style lang="scss">
.app-button {
  display: inline-block;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  background-image: linear-gradient(135deg, var(--beaver) 0%, var(--beaver) 51%, var(--walnut-brown) 110%);
  background-size: 200% auto;
  background-color: var(--walnut-brown);
  background-repeat: repeat;
  color: var(--white-smoke);
  font-weight: 500;
  transition: .15s ease-out;
  transition-property: color, background-position;

  &:hover:not(:active) {
    background-position: right center;
  }
}
</style>
