import { useState, useEffect } from "react";

const breakpointsMap = {
  xs: 576,
  sm: 768,
  md: 992,
  lg: 1200,
  xl: 1600,
  xxl: 1920,
};

const useBreakpoint = () => {
  const [breakpoint, setBreakpoint] = useState("lg");
  const { sm, xs, md, lg, xl, xxl } = breakpointsMap;

  useEffect(() => {
    const updateBreakpoint = () => {
      if (window.innerWidth < xs) {
        setBreakpoint("xs");
      } else if (window.innerWidth >= xs && window.innerWidth < sm) {
        setBreakpoint("sm");
      } else if (window.innerWidth >= sm && window.innerWidth < md) {
        setBreakpoint("md");
      } else if (window.innerWidth >= md && window.innerWidth < lg) {
        setBreakpoint("lg");
      } else if (window.innerWidth >= xl && window.innerWidth < xxl) {
        setBreakpoint("xl");
      } else if (window.innerWidth >= xxl) {
        setBreakpoint("xxl");
      }
    };

    window.addEventListener("resize", updateBreakpoint);
    updateBreakpoint();

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

  return breakpoint;
};

export default useBreakpoint;