/**
 * @fileoverview Utility module for useIsMobile.js
 * 
 * @module hooks.useIsMobile
 */

import { useState, useEffect } from "react";
import { isMobileViewport } from "../utils/isMobile";

/**
 * Hook para detectar se a viewport está em modo mobile.
 * Rastreia redimensionamento de janela e atualiza estado automaticamente.
 * Útil para renderização condicional e ajustes de layout responsivo.
 *
 * @hook useIsMobile
 * @param {number} [breakpoint=768] - Largura em pixels abaixo da qual é considerado mobile
 * 
 * @returns {boolean} true se window.innerWidth < breakpoint, false caso contrário
 *
 * @example
 * const isMobile = useIsMobile();
 * return isMobile ? <MobileNav /> : <DesktopNav />;
 *
 * @example
 * const isSmall = useIsMobile(640); // breakpoint customizado
 */
export function useIsMobile(breakpoint = 768) {
  const [isMobile, setIsMobile] = useState(isMobileViewport(breakpoint));

  useEffect(() => {
    const handleResize = () => setIsMobile(isMobileViewport(breakpoint));
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [breakpoint]);

  return isMobile;
}
