import React, { useState } from 'react';

const Header: React.FC = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [notificationCount] = useState(3);

  return (
    <header className="app-header" role="banner" aria-label="Main navigation">
      <div className="header-content">
        <div className="header-left">
          <h1 className="header-title">
            <i className="fas fa-cloud mr-2" aria-hidden="true"></i>
            <span>Multi-Cloud Orchestration Portal</span>
          </h1>
        </div>
        
        <div className="header-center">
          <div className="header-search">
            <label htmlFor="header-search-input" className="sr-only">Search</label>
            <i className="fas fa-search" aria-hidden="true"></i>
            <input
              id="header-search-input"
              type="search"
              placeholder="Search..."
              className="search-input"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              aria-label="Search the portal"
              autoComplete="off"
              spellCheck={false}
            />
          </div>
        </div>
        
        <div className="header-right">
          <button 
            className="header-btn" 
            title="Notifications" 
            aria-label="Notifications"
            aria-describedby={notificationCount > 0 ? "notification-count" : undefined}
            type="button"
          >
            <span className="sr-only">Notifications</span>
            <i className="fas fa-bell" aria-hidden="true"></i>
            {notificationCount > 0 && (
              <span 
                id="notification-count"
                className="badge" 
                aria-label={`${notificationCount} unread notifications`}
                aria-live="polite"
              >
                {notificationCount}
              </span>
            )}
          </button>
          
          <button 
            className="header-btn" 
            title="Settings" 
            aria-label="Open settings menu" 
            type="button"
          >
            <span className="sr-only">Settings</span>
            <i className="fas fa-cog" aria-hidden="true"></i>
          </button>
          
          <button 
            className="header-user" 
            type="button"
            title="User menu"
            aria-label="User menu"
          >
            <div className="user-avatar" aria-hidden="true">
              <i className="fas fa-user"></i>
            </div>
            <div className="user-info">
              <div className="user-name">Admin User</div>
              <div className="user-role">Administrator</div>
            </div>
          </button>
        </div>
      </div>
    </header>
  );
};

export default Header;
