<script lang="ts">
  import type { Signal } from '$lib/types.js';
  let { signal }: { signal: Signal | null | undefined } = $props();

  const cls = () => {
    if (signal?.includes('Strong')) return 'strong';
    if (signal?.includes('Momentum')) return 'momentum';
    if (signal?.includes('Speculation')) return 'spec';
    if (signal?.includes('Neutral')) return 'neutral';
    return 'avoid';
  };
</script>

<span class="badge {cls()}">{signal ?? '—'}</span>

<style>
  .badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .strong   { background: #14532d33; color: #4ade80; }
  .momentum { background: #1e3a5f33; color: #60a5fa; }
  .spec     { background: #7c2d1233; color: #fb923c; }
  .neutral  { background: #1e293b;   color: #94a3b8; }
  .avoid    { background: #450a0a33; color: #f87171; }
</style>
