import React from 'react';
import './Header.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faGripVertical, 
  faBoxOpen, 
  faMousePointer, 
  faBoxes, 
  faCog, 
  faBoxArchive,
  faBox,
  faWarehouse,
  faGraduationCap,
  faCubesStacked,
  faBorderAll,
  faBagShopping
} from '@fortawesome/free-solid-svg-icons';

function Header({ activePage, setActivePage, minimizeToTray, quitApp }) {
  // Navigation buttons for each page with icons
  const navItems = [
    { id: 'inventory', icon: faBagShopping, tooltip: 'Inventory' },
    { id: 'cursors', icon: faMousePointer, tooltip: 'Cursors' },
    { id: 'crates', icon: faBoxOpen, tooltip: 'Crates' },
    { id: 'settings', icon: faCog, tooltip: 'Settings' }
  ];
  
  return (
    <header className="app-header" data-tauri-drag-region>
      <div className="tabs-container">
        {navItems.map((item) => (
          <div 
            key={item.id}
            className={`tab ${activePage === item.id ? 'active' : ''}`}
            onClick={() => setActivePage(item.id)}
            title={item.tooltip}
          >
            <FontAwesomeIcon icon={item.icon} />
          </div>
        ))}
        <div className="window-controls">
          <button className="minimize-button" onClick={minimizeToTray} title="Minimize to Tray">
            _
          </button>
          <button className="close-button" onClick={quitApp} title="Quit Application">
            ×
          </button>
        </div>
      </div>
    </header>
  );
}

export default Header;