/** Header.jsx — royal chronicles header */
const { useState } = React;

function Header({ mood = 'Skeptical', onMoodClick }) {
  return (
    <header className="rc-header">
      <div className="rc-header-inner">
        <div className="rc-logo">
          <span className="rc-logo-crown">♛</span>
          <span className="rc-logo-text">Milo's Royal Chronicles</span>
        </div>
        <nav className="rc-nav">
          <a className="active">Chronicles</a>
          <a>Wisdom</a>
          <a>Missions</a>
          <a>The Court</a>
          <a>Archive</a>
        </nav>
        <button className="rc-mood-pill" onClick={onMoodClick}>
          <span>Today's Mood · {mood}</span>
        </button>
      </div>
    </header>
  );
}

window.Header = Header;