<template>
  <div class="text-center w-100">
    <div class="text-body-2">
      {{ props.promptText }}
      <a
        class="text-primary text-decoration-none font-weight-bold ml-1"
        :href="props.href || '#'"
        :target="props.target"
        @click="handleClick"
      >
        {{ props.linkText }}
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  promptText: {
    type: String,
    default: '還沒有帳號?',
  },
  linkText: {
    type: String,
    default: '註冊帳號',
  },
  href: {
    type: String,
    default: '',
  },
  target: {
    type: String,
    default: undefined,
  },
})

const emit = defineEmits(['click'])

function handleClick(e: MouseEvent) {
  emit('click', e)
  if (!props.href) {
    e.preventDefault()
  }
}
</script>
