import React from 'react';
import { useConfigContext } from '../../contexts/ConfigContext';
import './Header.css';

const Header = ({ isAdmin, onLogout, currentView, onViewChange }) => {
  const { logo, appName } = useConfigContext();

  return (
    <header className="app-header">
      <a href="/" className="portal-back-link" title="Zur App-Auswahl">&#8592; Apps</a>
      <div className="app-brand">
        {logo && (
          <img src={logo} alt="App-Logo" className="app-logo" />
        )}
        <h1 className="app-title">{appName || 'App'}</h1>
      </div>
      <nav className="app-nav">
        <button
          className={`nav-button ${currentView === 'rules' ? 'active' : ''}`}
          onClick={() => onViewChange('rules')}
        >
          Allgemeines
        </button>
        <button
          className={`nav-button ${currentView === 'public' ? 'active' : ''}`}
          onClick={() => onViewChange('public')}
        >
          Verfügbare Führer
        </button>
        {!isAdmin && (
          <>
            <button
              className={`nav-button ${currentView === 'handler-login' || currentView === 'handler-dashboard' ? 'active' : ''}`}
              onClick={() => onViewChange('handler-login')}
            >
              Hundeführer Login
            </button>
            <button
              className={`nav-button ${currentView === 'login' ? 'active' : ''}`}
              onClick={() => onViewChange('login')}
            >
              Admin Login
            </button>
          </>
        )}
        {isAdmin && (
          <button
            className={`nav-button ${currentView === 'admin' ? 'active' : ''}`}
            onClick={() => onViewChange('admin')}
          >
            Admin Panel
          </button>
        )}
        {isAdmin && (
          <button className="nav-button logout-button" onClick={onLogout}>
            Abmelden
          </button>
        )}
      </nav>
    </header>
  );
};

export default Header;
