import React, { ReactNode } from "react";
import { Box, ScrollArea, Stack } from "@mantine/core";
import { StatusSchema } from "@/lib/client";
import styles from "./StatusColumnWrapper.module.css";

type Props = {
    status: StatusSchema;
    renderHeader: () => ReactNode;
    children: ReactNode;
};

const StatusColumnWrapper = ({ renderHeader, children }: Props) => {
    return (
        <Box className={styles.container}>
            <Stack
                px={"xs"}
                pb={"xs"}
                className={styles["inner-container"]}>
                {renderHeader()}
                <ScrollArea
                    offsetScrollbars={"y"}
                    scrollbarSize={10}
                    type={"always"}
                    scrollbars={"y"}>
                    <Stack mah={"calc(100vh - 220px)"}>{children}</Stack>
                </ScrollArea>
            </Stack>
        </Box>
    );
};

export default StatusColumnWrapper;