import React from 'react';
import { makeStyles } from '@material-ui/core';
import { getRatio } from './getRatio';
const createRatio = (width, ratio1, ratio2) => {
    const x = (width * ratio1) / ratio2;
    return Math.ceil(x / 8) * 8;
};
const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%',
        maxWidth: (props) => props.width,
        padding: theme.spacing(1)
    }
}));
export const GridUnit = (props) => {
    const classes = useStyles(props);
    const { children, columnPadding, width, ratio } = props;
    const ratioArr = getRatio(ratio);
    return (React.createElement("div", { className: classes.root, style: {
            height: createRatio(width, ratioArr[0], ratioArr[1]) - (columnPadding || 8)
        } }, children));
};
//# sourceMappingURL=GridUnit.js.map