import React from 'react';
import { Box, Typography } from '@material-ui/core';

export interface IProps {
    children: any,
}

export default function QBOrBlock(props: any) {
    const firstChild = Array.isArray(props.children) && props.children.length >= 1 ?
        props.children[0] : undefined;

    const otherChildren = Array.isArray(props.children) && props.children.length > 1 ?
        props.children.slice(1) : [];

    return <Box
        display="flex"
        alignItems="center"
    >
        <Box m={1}>
            {firstChild}
        </Box>
        {otherChildren.map((child: any, idx: number) => {
            return <Box display="flex" alignItems="center" key={idx}>
                <Box m={1}>
                    <Typography variant="button">Or</Typography>
                </Box>
                <Box m={1}>
                    {child}
                </Box>
            </Box>;
        })}
    </Box>
}