import React, { Fragment } from 'react';
import Col from './Col.jsx';
import P from './P.jsx';

const BackBox4 = (props) => {

    return (
        <Fragment>
            <div className={'back4 ' + props.className ?? ''} style={props.centrar ? { textAlign: 'center' } : {}}>
                <h3 className={props.claseTitulo ? props.claseTitulo : "mb-3"}>{props.titulo}</h3>
                {props.columnas &&
                    <div className="row">
                        {props.columnas.map((x, i) => <Col key={i} detalle={x.detalle} />)}
                    </div>}
                {props.br !== undefined && <br />}
                {props.detalle && props.detalle.map((x, i) => <P key={i} clase={x.clase} valor={x.valor} />)}

            </div>
        </Fragment>
    );

}
export default BackBox4;