import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles(
    {
        column: {
            display: 'flex',
            flexDirection: 'column',
        },
    },
    { name: 'TwoSideBottomBar' }
);

export function TwoSideBottomBar({ leftSide, rightSide }) {
    const classes = useStyles();
    return (
        <Grid container spacing={3}>
            <Grid className={classes.column} item xs={6} sm={5}>
                {leftSide}
            </Grid>
            <Grid className={classes.column} item xs={6} sm={7}>
                {rightSide}
            </Grid>
        </Grid>
    );
}

TwoSideBottomBar.propTypes = {
    leftSide: PropTypes.node,
    rightSide: PropTypes.node,
};
