import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { MantineSize, Paper } from "@mantine/core";

export interface SettingsPaperProps {
    children: React.ReactNode;
    mt?: MantineSize;
    style?: React.CSSProperties;
    p?: MantineSize;
}

export function SettingsPaper(props: SettingsPaperProps) {
    const colors = useRosettaColors();

    return (
        <Paper mt={props.mt} p={props.p} style={props.style} withBorder styles={{
                root: {
                    borderTop: '1px solid ' + colors.borderColor,
                    borderBottom: '1px solid ' + colors.borderColor,
                    borderLeft: '1px solid ' + colors.borderColor,
                    borderRight: '1px solid ' + colors.borderColor,
                }
            }}
        >
            {props.children}
        </Paper>    
    );
}