<template>
  <span class="badge" :class="journey === 'Pre-Purchase' ? 'pre' : 'post'">{{ journey }}</span>
</template>
<script setup>
defineProps({ journey: String })
</script>
<style scoped>
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.pre  { background: #EEF2FF; color: #4338ca; }
.post { background: #f0fdf4; color: #15803d; }
</style>
