import React from "react";
import {Box, Typography} from "@mui/material";
import {GroupedContentProps} from "./types";

function GroupedContent(props: GroupedContentProps) {

    const allElements = props.content.map(cGroup => {
        return (
            <Box
                key={cGroup.key}
                sx={{marginBottom: '2rem'}}>

                <Typography variant={"h2"}>{cGroup.name}</Typography>
                <Box marginTop={1}>
                    {cGroup.element}
                </Box>
            </Box>
        );
    });

    return (<Box>{allElements}</Box>);

}


export default GroupedContent;