/** @jsx React.createElement */
/* PageTopbar — gauge icon + title, used for Dashboard/Reports/etc. */

function PageTopbar({ icon, title }) {
  const navy = '#3F507B';
  const icons = {
    gauge: (
      <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke={navy} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 14a9 9 0 1 1 18 0"/>
        <path d="M3 14h2M19 14h2M12 5v2"/>
        <path d="M12 14l4.5-4.5"/>
        <circle cx="12" cy="14" r="1.2" fill={navy} stroke="none"/>
      </svg>
    ),
  };
  return (
    <header style={{
      display: 'flex', alignItems: 'center', gap: 16,
      padding: '22px 28px 16px',
      background: '#fff',
      flexShrink: 0,
    }}>
      <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 12 }}>
        {icons[icon] || icons.gauge}
        <h1 style={{
          fontSize: 28, fontWeight: 400, color: navy,
          margin: 0, letterSpacing: '-.01em', lineHeight: 1,
        }}>{title}</h1>
      </div>
    </header>
  );
}

Object.assign(window, { PageTopbar });