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

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

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

export default StatusColumnWrapper;