<template>
  <span class="badge" :class="sentiment">{{ sentiment }}</span>
</template>
<script setup>
defineProps({ sentiment: String })
</script>
<style scoped>
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  text-transform: lowercase;
}
.positive { background: var(--positive-bg); color: var(--positive); }
.negative { background: var(--negative-bg); color: var(--negative); }
.neutral  { background: var(--neutral-bg);  color: var(--neutral);  }
</style>
