<%# locals: (label:) %>
<%# Simple non-interactive badge for displaying activity labels %>
<%
  # Color mapping for different investment activity labels
  color = case label
  when "Buy"
    "rgb(59 130 246)" # blue
  when "Sell"
    "rgb(239 68 68)" # red
  when "Dividend", "Interest"
    "rgb(34 197 94)" # green
  when "Contribution"
    "rgb(168 85 247)" # purple
  when "Withdrawal"
    "rgb(249 115 22)" # orange
  when "Fee"
    "rgb(107 114 128)" # gray
  when "Transfer", "Sweep In", "Sweep Out", "Exchange"
    "rgb(107 114 128)" # gray
  when "Reinvestment"
    "rgb(59 130 246)" # blue
  else
    "rgb(107 114 128)" # gray for "Other"
  end
%>

<span class="inline-flex items-center gap-1 text-xs font-medium rounded px-1.5 py-0.5 border"
      style="
        background-color: color-mix(in oklab, <%= color %> 10%, transparent);
        border-color: color-mix(in oklab, <%= color %> 20%, transparent);
        color: <%= color %>;">
  <%= label %>
</span>
