import React, {Component} from 'react';
import {Container, Col, Row} from 'reactstrap';
import './WiaasTable.css';


class WiaasTable extends Component {
    render() {
        const {id, className} = this.props;
        return (
            <div id={id} className={'wiaas-table ' + className}>{this.props.children}</div>
        );
    }
}

class WiaasTableHeader extends Component {
    render() {
        const {headers} = this.props;
        return (
            <div className="wiaas-table-header">
                <Row>
                    {
                        headers &&
                        headers.map((header, index) => <Col key={index}>{header}</Col>)
                    }
                </Row>
            </div>
        );
    }
}

class WiaasTableBody extends Component {
    render() {
        const {id} = this.props;
        return (
            <div id={id} className="wiaas-table-body"><Container fluid={true}>{this.props.children}</Container></div>
        );
    }
}

class WiaasTableRow extends Component {
    render() {
        const {className, id, children} = this.props;

        return (
            <Row id={id} className={'wiaas-table-row ' + className}>{children}</Row>
        );
    }
}

class WiaasTableCol extends Component {
    render() {
        const {header, className, id, children} = this.props;

        return (
            <Col id={id} lg="" md="6" sm="12" xs="12" className={'wiaas-table-col ' + className}>
                {header && <div className="wiass-table-small-scr-header">{header} :</div>}
                {children}
            </Col>
        );
    }
}

export{ WiaasTable, WiaasTableHeader, WiaasTableBody, WiaasTableRow, WiaasTableCol};
