import { Grid } from 'antd';
import { useEffect, useState } from 'react';

const { useBreakpoint } = Grid;

/**
 * A wrapper around antd's Grid.useBreakpoint that respects the application's minimum width.
 * If the window width is less than 1700px (the min-width set in CSS), it forces the breakpoints
 * to behave as if the screen is large (xxl), preventing the layout from switching to mobile/tablet modes
 * when the user scrolls horizontally.
 */
const useEffectiveBreakpoint = () => {
    const screens = useBreakpoint();
    // const [isForcedLarge, setIsForcedLarge] = useState(false);

    // useEffect(() => {
    //     const handleResize = () => {
    //         // Check if window width is less than the min-width (1700px)
    //         // We use a slightly smaller buffer or exact match depending on needs, 
    //         // but strictly < 1700 matches the CSS min-width logic.
    //         setIsForcedLarge(window.innerWidth < 1700);
    //     };

    //     // Initial check
    //     handleResize();

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

    // if (isForcedLarge) {
    //     // Return a breakpoint object that mimics a very large screen
    //     return {
    //         xs: true,
    //         sm: true,
    //         md: true,
    //         lg: true,
    //         xl: true,
    //         xxl: true,
    //     };
    // }

    return screens;
};

export default useEffectiveBreakpoint;