import { useEffect, useState } from 'react';

// Hardcoded breakpoints based on your Tailwind config
const breakpoints = {
    xxxxs: 0,
    xxxs: 275,
    xxs: 320,
    xs: 475,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    '2xl': 1400,
};

const getCurrentBreakpoint = () => {
    if (typeof window === 'undefined') return null; // Handle SSR

    const sortedBreakpoints = Object.entries(breakpoints).sort((a, b) => b[1] - a[1]);

    return sortedBreakpoints.find(([_, width]) => window.innerWidth >= width)?.[0] || 'xxs';
};

const useTailwindBreakpoint = () => {
    const [breakpoint, setBreakpoint] = useState(null);

    useEffect(() => {
        const handleResize = () => {
            setBreakpoint(getCurrentBreakpoint());
        };

        handleResize(); // Set initial breakpoint
        window.addEventListener('resize', handleResize);

        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return breakpoint;
};

export default useTailwindBreakpoint;