import { Box, Flex, ScrollArea } from "@mantine/core";
import { useEffect, useState } from "react";

interface InternalScreenProps {
    children: any;
}
export function InternalScreen(props : InternalScreenProps) {
    const [scrollAreaHeight, setScrollAreaHeight] = useState(window.innerHeight);

    useEffect(() => {
        const handleResize = () => setScrollAreaHeight(window.innerHeight);
        window.addEventListener("resize", handleResize);
        handleResize();
        return () => window.removeEventListener("resize", handleResize);
    }, []);

    return (
        <Flex align={'center'} justify={'center'}>
            <Box maw={650} w={'100%'}>
                <ScrollArea
                    type="hover"
                    offsetScrollbars={"y"}
                    scrollHideDelay={1500}
                    scrollbarSize={7}
                    w={'100%'}
                    h={scrollAreaHeight - 100} // Adjust height with an offset
                >
                    <Box pb={'lg'} pl={'md'} pt={'md'} pr={'sm'}>
                        {props.children}
                    </Box>
                </ScrollArea>
            </Box>
        </Flex>
    );
}