/* Header bar */

function Header({ onProfile, onBell }) {
  return (
    <header className="hd">
      <div className="hd-burger"><Icon.Menu/></div>
      <div className="hd-tag">
        <span style={{fontSize:14}}>📁</span>
        <span style={{color:"#262626"}}>Admin Area</span>
        <span className="pill">Free</span>
        <Icon.Down size={12} style={{color:"#bfbfbf"}}/>
      </div>
      <div className="hd-search">
        <Icon.Search size={14}/>
        <span>Search…</span>
        <span className="kbd">⌘K</span>
      </div>
      <div className="hd-spacer"/>
      <div className="hd-icons">
        <div className="hd-icon" title="Apps"><Icon.Grid size={16}/></div>
        <div className="hd-icon" title="Translate" style={{fontSize:13,fontWeight:600}}>文A</div>
        <div className="hd-icon" title="Notifications" onClick={onBell}>
          <Icon.Bell size={16}/>
          <span className="badge">3</span>
        </div>
        <div className="hd-icon" title="Messages"><Icon.Chat size={16}/></div>
        <div className="hd-icon" title="Settings"><Icon.Setting size={16}/></div>
        <div onClick={onProfile} style={{marginLeft:6,cursor:"pointer"}}>
          <Avatar size={36}>SB</Avatar>
        </div>
      </div>
    </header>
  );
}

window.Header = Header;