import React, { Component } from "react";

require("./LabeledValue.scss");


function LabeledValue(props) {
    let value = props.value;
    let size = props.size || "";

    if (!value) {
        value = props.children || null;
    } else  if (Array.isArray(value)) {
        value = value.join(", ");
    } else {
        value = "" + value;
    }

    if (props.inverted) {
        return (
            <div className={ `labeled-value ${props.className}`}>
                <div className="labeled-value-label">{ props.label || null }</div>
                <div className={ `labeled-value-value ${size}` }>{ value }</div>
            </div>
        );
    }

    return (
        <div className={ `labeled-value ${props.className}`}>
            <div className={ `labeled-value-value ${size}` }>{ value }</div>
            <div className="labeled-value-label">{ props.label || null }</div>
        </div>
    );
}

export default LabeledValue;


