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

interface HeaderProps {
  title: string;
}

/**
 * En-tête de l'application : marque à gauche, bouton de connexion/déconnexion à droite.
 *
 * Composant volontairement isolé dans son propre fichier pour être facilement
 * surchargé/personnalisé (ex. y monter un EventPicker / CommunityPicker selon
 * l'usage de l'extension). Les pickers ne sont PAS montés ici par défaut.
 */
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 ? (
          <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>
  );
}