import React from 'react';
import './style';

interface CollectionItem {
    key: string;
    label: string;
    value?: string | number;
    color?: string;
}

interface InfoCollectionProps {
    data: CollectionItem[];
    gap?: number;
    horizontal?: boolean;
}
interface ValueStyle {
    color?: string;
}

function InfoCollection(props: InfoCollectionProps) {
    const { data = [], gap = 8, horizontal = false } = props;
    return (
        <div className={horizontal ? 'info-collection-horizontal' : 'info-collection'}>
            {data.map(item => {
                const style: ValueStyle = {};
                if (item.color) style.color = item.color;
                return (
                    <div className="info-line" key={item.key} style={{ marginBottom: gap }}>
                        <div className="label">{item.label}：</div>
                        <div className="value" style={style}>
                            {item.value || '--'}
                        </div>
                    </div>
                );
            })}
        </div>
    );
}

export default InfoCollection;
