/**
 * 반응형 브레이크포인트 감지 훅
 */

import { useState, useEffect } from "react";
import { Breakpoint, BREAKPOINTS } from "@/types/responsive";

/**
 * 현재 윈도우 크기에 따른 브레이크포인트 반환
 */
export function useBreakpoint(): Breakpoint {
  const [breakpoint, setBreakpoint] = useState<Breakpoint>("desktop");

  useEffect(() => {
    const updateBreakpoint = () => {
      const width = window.innerWidth;

      if (width >= BREAKPOINTS.desktop.minWidth) {
        setBreakpoint("desktop");
      } else if (width >= BREAKPOINTS.tablet.minWidth) {
        setBreakpoint("tablet");
      } else {
        setBreakpoint("mobile");
      }
    };

    // 초기 실행
    updateBreakpoint();

    // 리사이즈 이벤트 리스너 등록
    window.addEventListener("resize", updateBreakpoint);

    return () => window.removeEventListener("resize", updateBreakpoint);
  }, []);

  return breakpoint;
}

/**
 * 현재 브레이크포인트의 컬럼 수 반환
 */
export function useGridColumns(): number {
  const breakpoint = useBreakpoint();
  return BREAKPOINTS[breakpoint].columns;
}