import React from 'react';
import PropTypes from 'prop-types';
import useSettings from '../vm-hooks/useSettings';
import './style';
const StatItem = props => {
    const { icon, label, value = 0, unit, color } = props;
    let style = {};
    let values = [];
    let units = [];
    if (value instanceof Array) {
        values = value;
        units = unit;
    } else {
        values.push(value);
        units.push(unit);
    }
    if (color) style.color = color;
    return (
        <div className="stat-item">
            <img src={icon} alt="" />
            <div className="data">
                <div className="label">{label}</div>
                <div className="value">
                    {values.map((v, i) => {
                        const u = units[i];
                        return (
                            <>
                                <span className="number" style={style}>
                                    {v}
                                </span>
                                {u && <span className="unit">{u}</span>}
                            </>
                        );
                    })}
                </div>
            </div>
        </div>
    );
};

StatItem.propTypes = {
    icon: PropTypes.string,
    label: PropTypes.string,
    value: PropTypes.string,
    unit: PropTypes.string,
    color: PropTypes.string,
};

const StatCollection = props => {
    const { items } = props;
    const { theme } = useSettings();
    return (
        <div className={`vtx-modal-stat-collection ${theme}`}>
            {items.map(item => (
                <StatItem key={item.label} {...item} />
            ))}
        </div>
    );
};
StatCollection.propTypes = {
    items: PropTypes.array,
};

export default StatCollection;