import * as React from "react";
import { observer } from "mobx-react";

import { GroupModel } from "../models/GroupModel";
import { GridGroup } from "./GridGroup";

import * as theme from "./GridGroup.scss";

export const GridGroups = observer(({ groups, top, ...rest } : any) => {
    return (
        <div className={theme.groups} style={{top: top}}>
            {
                groups.map(function(group : GroupModel) {
                    return <GridGroup group={group} key={group.name} {...rest}/>;
                })
            }
        </div>
    );
});