function TopBar({ title, subtitle, actions }) {
  return (
    <div style={{
      height: 56,
      borderBottom: '1px solid var(--border-default)',
      background: 'var(--neutral-0)',
      display: 'flex', alignItems: 'center', padding: '0 24px', gap: 16, flexShrink: 0,
    }}>
      <div style={{ minWidth: 200, flexShrink: 0 }}>
        <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>{title}</div>
        {subtitle && <div style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{subtitle}</div>}
      </div>

      <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
        <div style={{
          position: 'relative', width: 380, maxWidth: '100%',
        }}>
          <span style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--fg-3)', display: 'inline-flex' }}>
            <Icon name="search" size={15} />
          </span>
          <input placeholder="지원자, 공고, 부서로 검색 · ⌘K" style={{
            width: '100%', padding: '7px 12px 7px 32px',
            border: '1px solid var(--border-default)',
            borderRadius: 8, background: 'var(--neutral-50)',
            fontSize: 12.5, fontFamily: 'var(--font-sans)',
            outline: 'none',
          }}/>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {actions}
        <IconBtn name="bell" badge={3} />
        <IconBtn name="help-circle" />
      </div>
    </div>
  );
}

function IconBtn({ name, badge }) {
  const [hover, setHover] = useState(false);
  return (
    <button onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)} style={{
      width: 32, height: 32, borderRadius: 8,
      background: hover ? 'var(--neutral-100)' : 'transparent',
      border: 'none', cursor: 'pointer',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', color: 'var(--fg-2)',
    }}>
      <Icon name={name} size={17} />
      {badge && <span style={{
        position: 'absolute', top: 5, right: 5,
        minWidth: 14, height: 14, padding: '0 4px',
        background: 'var(--danger-500)', color: '#fff',
        fontSize: 9.5, fontWeight: 700, borderRadius: 999,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-latin)',
      }}>{badge}</span>}
    </button>
  );
}

window.TopBar = TopBar;