import * as React from 'react';
import classnames from 'classnames';

type labelAlignEnum = 'top' | 'left';

interface ListProps {
  className?: string;
  maxHeight?: boolean | string;
  title?: string | React.ReactNode;
  dataSource?: Array<ItemProps>;
  labelAlign?: labelAlignEnum;
  labelWidth?: string;
}

interface ItemProps {
  label: string;
  value?: string | number | React.ReactNode;
}

const List: React.FC<ListProps> = ({
  className = '',
  maxHeight = '',
  title = '',
  dataSource = [],
  labelAlign = 'top',
  labelWidth = '30%',
}) => {
  return dataSource.length ? (
    <div
      className={classnames('op-card', 'op-card-list', className, {
        'op-card-max-height': maxHeight,
      })}
    >
      {title ? <div className='op-card-title'>{title}</div> : null}
      <div
        className={classnames('op-card-list-content', {
          'op-card-scroll': maxHeight,
        })}
      >
        {dataSource.map((item) => {
          const { label, value } = item;
          const itemLabelWidth =
            labelAlign === 'left' && labelWidth ? labelWidth : 'auto';
          return (
            <div
              className={classnames(
                'op-card-list-item',
                `label-align-${labelAlign}`,
              )}
            >
              <div className='item-label' style={{ width: itemLabelWidth }}>
                {label}
              </div>
              {value ? <div className='item-value'>{value}</div> : null}
            </div>
          );
        })}
      </div>
    </div>
  ) : null;
};

export default List;