<script lang="ts">
  import { fmtPE } from '$lib/utils.js';
  import type { MarketContext } from '$lib/types.js';
  let { ctx }: { ctx: MarketContext } = $props();

  // Flat list of chips so the template stays declarative
  const chips = $derived([
    { label: '10Y',      value: ctx.riskFreeRate?.toFixed(2) + '%' },
    { label: 'VIX',      value: ctx.vixLevel?.toFixed(1) },
    { label: 'S&P',      value: ctx.sp500Price?.toLocaleString() },
    { label: 'S&P P/E',  value: fmtPE(ctx.benchmarks?.marketPE) },
    { label: 'Tech P/E', value: fmtPE(ctx.benchmarks?.techPE) },
    { label: 'REIT Yld', value: ctx.benchmarks?.reitYield?.toFixed(2) + '%' },
    { label: 'IG Sprd',  value: ctx.benchmarks?.igSpread?.toFixed(2) + '%' },
    { label: 'Rates',    value: ctx.rateRegime,      regime: ctx.rateRegime },
    { label: 'Vol',      value: ctx.volatilityRegime, regime: ctx.volatilityRegime },
  ]);
</script>

<div class="ctx-strip">
  {#each chips as chip}
    <div class="ctx-chip">
      <span class="ctx-label">{chip.label}</span>
      <span class="ctx-val" class:ctx-regime={!!chip.regime} data-regime={chip.regime ?? ''}>
        {chip.value ?? '—'}
      </span>
    </div>
  {/each}
</div>

<style>
  .ctx-strip {
    display: flex;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .ctx-chip {
    flex: 1;
    min-width: 70px;
    background: var(--bg-base);
    padding: 10px var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .ctx-label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dimmer);
  }

  .ctx-val {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }

  .ctx-regime[data-regime='HIGH']   { color: var(--red);       }
  .ctx-regime[data-regime='NORMAL'] { color: var(--text-muted); }
  .ctx-regime[data-regime='LOW']    { color: var(--green);      }
</style>
