/* En-tête fixe de l'application Data Sentinel */

import { Bell, LogOut, Menu } from 'lucide-react';
import { useAuth } from '../../context/AuthContext';
import { useNavigate } from 'react-router-dom';
import styles from './Header.module.css';

export default function Header({ onToggleSidebar, sidebarOpen }) {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  function handleLogout() {
    logout();
    navigate('/login');
  }

  return (
    <header className={styles.header} role="banner">
      {/* Lien d'évitement pour l'accessibilité clavier */}
      <a href="#main-content" className={styles.skipLink}>
        Aller au contenu principal
      </a>

      <div className={styles.left}>
        {/* Bouton burger pour mobile */}
        <button
          className={styles.burgerBtn}
          onClick={onToggleSidebar}
          aria-label={sidebarOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
          aria-expanded={sidebarOpen}
          aria-controls="sidebar"
        >
          <Menu size={20} color="var(--color-white)" aria-hidden="true" />
        </button>
        <div className={styles.logo} role="img" aria-label="Data Sentinel">
          <span className={styles.logoIcon} aria-hidden="true">▶</span>
          <span className={styles.logoText}>Data Sentinel</span>
        </div>
        <span className={styles.byXefi} aria-label="by XEFI">by XEFI</span>
      </div>

      <div className={styles.right}>
        <button className={styles.iconBtn} aria-label="Notifications">
          <Bell size={18} color="var(--color-white)" aria-hidden="true" />
        </button>
        {user && (
          <span className={styles.username} aria-label={`Connecté en tant que ${user.username}`}>
            {user.username}
          </span>
        )}
        <button
          className={styles.logoutBtn}
          onClick={handleLogout}
          aria-label="Se déconnecter"
        >
          <LogOut size={15} aria-hidden="true" />
          Déconnexion
        </button>
      </div>
    </header>
  );
}