import { useState, useEffect } from 'react';

/**
 * Hook qui détecte si l'appareil est un mobile en fonction de la largeur de l'écran
 * @param breakpoint Largeur en pixels en dessous de laquelle on considère qu'il s'agit d'un mobile (défaut: 768px)
 * @returns boolean indiquant si l'appareil est considéré comme mobile
 */
export function useMobile(breakpoint: number = 768): boolean {
  // État initial basé sur la largeur de la fenêtre (si disponible côté client)
  const [isMobile, setIsMobile] = useState<boolean>(
    typeof window !== 'undefined' ? window.innerWidth < breakpoint : false
  );

  useEffect(() => {
    // Fonction pour mettre à jour l'état en fonction de la largeur de la fenêtre
    const checkMobile = () => {
      setIsMobile(window.innerWidth < breakpoint);
    };

    // Vérifier immédiatement au montage du composant
    checkMobile();

    // Ajouter un écouteur d'événement pour le redimensionnement de la fenêtre
    window.addEventListener('resize', checkMobile);

    // Nettoyer l'écouteur d'événement lors du démontage du composant
    return () => {
      window.removeEventListener('resize', checkMobile);
    };
  }, [breakpoint]); // Recalculer si le breakpoint change

  return isMobile;
}