// StaleBadge — the shared staleness / regenerating pills for the canvas world-layer
// sections (Brief / Timeline / StationGraph). Pure and tiny, no fetch: given the two
// flags it renders an amber "Stale" pill (the section's upstream drifted) and/or an
// indigo animate-ping "regenerating" pill (R0's spinner-card pattern), with a
// per-section `label` for the spinner text. Seated inside each section's strip label,
// so it inherits the label's absolute positioning.
//
// Props: { stale, regenerating, label }

const StaleBadge = ({ stale = false, regenerating = false, label = 'Regenerating…' }) => (
  <>
    {stale && (
      <span className="normal-case tracking-normal rounded-full bg-amber-50 border border-amber-200 px-2 py-0.5 text-[10px] font-bold text-amber-700">Stale</span>
    )}
    {regenerating && (
      <span className="normal-case tracking-normal flex items-center gap-1.5 rounded-full bg-indigo-50 border border-indigo-200 px-2 py-0.5 text-[10px] font-bold text-indigo-700">
        <span className="relative flex w-1.5 h-1.5">
          <span className="absolute inline-flex h-full w-full rounded-full bg-indigo-500 opacity-75 animate-ping" />
          <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-indigo-500" />
        </span>
        {label}
      </span>
    )}
  </>
);

if (typeof window !== 'undefined') {
  window.StaleBadge = StaleBadge;
}