/* global React */
const { useState } = React;

window.SiteHeader = function SiteHeader({ theme, onToggleTheme }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'rgba(245,241,232,0.85)',
      backdropFilter: 'blur(8px)',
      WebkitBackdropFilter: 'blur(8px)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <div style={{
        maxWidth: 'var(--maxw-page)', margin: '0 auto',
        padding: '14px 24px',
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16,
      }}>
        <a href="#top" style={{
          display: 'flex', alignItems: 'baseline', gap: 10,
          textDecoration: 'none', color: 'var(--ink)',
          whiteSpace: 'nowrap', minWidth: 0,
        }}>
          <span style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>빅이사</span>
          <span className="meta" style={{ color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>hwanghee.com</span>
        </a>
        <button
          onClick={onToggleTheme}
          aria-label="theme toggle"
          style={{
            background: 'transparent',
            border: '1px solid var(--rule-strong)',
            borderRadius: 6,
            padding: '4px 10px',
            fontFamily: 'var(--font-mono)',
            fontSize: 11,
            color: 'var(--ink-2)',
            letterSpacing: '0.04em',
            cursor: 'pointer',
          }}
        >
          {theme === 'dark' ? '[paper]' : '[terminal]'}
        </button>
      </div>
    </header>
  );
};