<template>
  <component :is="type" v-bind="actualProps()" class="Button">
    {{ label }}
  </component>
</template>

<script setup lang="ts">

type Props = {
  type ?: 'a' | 'button'
  href ?: string
  label : string
}

const props = withDefaults(defineProps<Props>(), {
  type : 'a'
})

const actualProps = () => {
  if (props.type === 'a') {
    return {
      href: props.href,
      target: props.href!.startsWith('https://') ? '_blank' : undefined,
    }
  }
}
</script>

<style>
.Button {
  all: unset;
  transition: 250ms;
  background: var(--color-orange);
  color: var(--color-black);
  cursor: pointer;
  padding: 1rem 1.5rem;
  outline: 3px solid var(--color-black);
  box-shadow: 0 0 0 0 var(--color-orange);
  border-radius: 99999px;
  text-align: center;

  &:hover {
    box-shadow: 0 0 0 6px var(--color-orange);
  }

  &.cta {
    font-size: clamp(1rem, 2vw, 1.5rem);
  }
}
</style>
