<template>
  <button :class="['login-btn', type]" @click="$emit('click')">
    <slot />
  </button>
</template>

<script>
export default {
  name: 'LoginButton',
  props: {
    type: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.login-btn {
  width: 80%;
  height: 44px;
  border-radius: 22px;
  font-size: 18px;
  font-weight: 500;
  margin: 12px 0;
  outline: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.login-btn.primary {
  background: #183b6b;
  color: #fff;
}
.login-btn.secondary {
  background: #fff;
  color: #183b6b;
  border: 2px solid #183b6b;
  position: relative;
}
</style> 