/* 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 }) {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

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

  return (
    <header className={styles.header}>
      <div className={styles.left}>
        {/* Bouton burger pour mobile */}
        <button className={styles.burgerBtn} onClick={onToggleSidebar} aria-label="Menu">
          <Menu size={20} color="var(--color-white)" />
        </button>
        <div className={styles.logo}>
          <span className={styles.logoIcon}>▶</span>
          <span className={styles.logoText}>Data Sentinel</span>
        </div>
        <span className={styles.byXefi}>by XEFI</span>
      </div>

      <div className={styles.right}>
        <button className={styles.iconBtn} aria-label="Notifications">
          <Bell size={18} color="var(--color-white)" />
        </button>
        {user && <span className={styles.username}>{user.nom}</span>}
        <button className={styles.logoutBtn} onClick={handleLogout}>
          <LogOut size={15} />
          Déconnexion
        </button>
      </div>
    </header>
  );
}