// VenueHeatPill — a small inline pill rendered next to a venue name on
// event cards. Shows "this week" / "upcoming" counts when we have heat
// data for the event's place_id; renders nothing otherwise.
//
// Copy chosen by Mav (Behavioral Analyst council take):
//   • thisWeek ≥ 1 → "<canonical> · {n} this week"
//   • else upcoming ≥ 2 → "<canonical> · {n} upcoming"
//   • else null (silent — don't pill venues with 1 lonely show)

function VenueHeatPill({ placeId, heat }) {
  if (!placeId || !heat) return null;
  const blob = heat[placeId];
  if (!blob) return null;

  const thisWeek = Number(blob.this_week_count || 0);
  const upcoming = Number(blob.upcoming_count || 0);

  let label = null;
  if (thisWeek >= 1) {
    label = `${thisWeek} this week`;
  } else if (upcoming >= 2) {
    label = `${upcoming} upcoming`;
  } else {
    return null;
  }

  // Dual-themed inline style — uses CSS vars from colors_and_type.css
  // when present, falls back to plain colors that work in both themes.
  return (
    <span
      className="venue-heat-pill"
      title={`${blob.canonical || ''} — ${blob.upcoming_count || 0} upcoming, next: ${blob.next_event_date || 'TBD'}`}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 4,
        fontSize: 10,
        fontWeight: 600,
        letterSpacing: 0.4,
        textTransform: 'uppercase',
        padding: '2px 6px',
        borderRadius: 3,
        marginLeft: 6,
        color: 'var(--amber-gold, #D57800)',
        border: '1px solid color-mix(in oklch, var(--amber-gold, #D57800) 30%, transparent)',
        background: 'color-mix(in oklch, var(--amber-gold, #D57800) 8%, transparent)',
      }}
    >
      <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'currentColor' }} />
      {label}
    </span>
  );
}

window.VenueHeatPill = VenueHeatPill;