import React, {ReactNode, useContext} from 'react';
import MainContainerContext from "../../../../context/mainContainer-context";

const breakpoints = {
    'cxs': 420,
    'csm': 600,
    'cmd': 780,
    'clg': 950,
    'cxl': 1100,
    'cxxl': 1270
}


type ResponsiveWrapperProps = {
    breakpoint: keyof typeof breakpoints
    children: ReactNode
}

/***
 *   HIDES CHILDREN WHEN VIEWPORT < BREAKPOINT
 */
const ResponsiveWrapper = ({breakpoint,children}: ResponsiveWrapperProps) => {

    const {containerRef} = useContext(MainContainerContext);

    return (
        <>
            {
                containerRef.current.offsetWidth > breakpoints[breakpoint] && children
            }

        </>
    );
}

export default ResponsiveWrapper;