import './Header.css';
import { FiLogIn, FiLogOut } from 'react-icons/fi';
import { useAuth } from '../hooks/useAuth';
import EventPicker from './EventPicker';

interface HeaderProps {
  title: string;
}

// Version surchargée du Header par l'overlay "test-app".
// Démontre qu'on peut personnaliser le Header (ici : montage d'un EventPicker)
// sans toucher au Layout ni à App — et force la compilation des pickers + du
// contexte inwink dans le build de test.
export default function Header({ title }: HeaderProps) {
  const { isAuthenticated, isLoading, login, logout } = useAuth();

  return (
    <header className="app-header">
      <div className="app-header__brand">{title}</div>
      <div className="app-header__actions">
        {isAuthenticated && <EventPicker />}
        {isAuthenticated ? (
          <button onClick={() => void logout()}>
            <FiLogOut aria-hidden />
            Se déconnecter
          </button>
        ) : (
          <button className="btn-primary" disabled={isLoading} onClick={() => void login()}>
            <FiLogIn aria-hidden />
            {isLoading ? 'Initialisation…' : 'Se connecter'}
          </button>
        )}
      </div>
    </header>
  );
}