/** @jsx jsx */
import * as React from "react";
import css from "@styled-system/css";
import { jsx } from "@emotion/core";
import { GapSizes, getGapValue } from "../utils/System";

//Grid

export type GridProps = {
    children: React.ReactNode;
    columns?: number;
    rows?: number;
    gap?: GapSizes;
    pad?: GapSizes;
};

const Grid: React.FC<GridProps> = ({ children, columns = 3, rows = 3, gap, pad }) => (
    <div
        css={css({
            display: "grid",
            padding: pad ? getGapValue(pad) : "initial",
            width: `100%`,
            gridTemplateRows: `repeat(${rows}, 1fr)`,
            gap: gap ? getGapValue(gap) : "auto",
            gridTemplateColumns: `repeat(${columns}, 1fr)`
        })}
    >
        {children}
    </div>
);

export default Grid;