/** @jsx jsx */
import { jsx } from '@emotion/core';
import * as React from 'react';

// @ts-ignore
import COLORS from '../../constants/colors';
import { WidgetOverviewCardMolecule } from '../../molecules';

interface UserData {
  iconName?: string;
  title?: string;
  info?: string;
  tooltip?: string;
}

interface IProps {
  className?: any;
  css?: any;
  items?: UserData[];
}

class WidgetOverviewPanelMolecule extends React.PureComponent<IProps, any> {
  public state = {};

  public render() {
    const { items = [] } = this.props;

    return (
      <div
        className={this.props.className}
        css={this.props.css}
      >
        {items.map((item, index) => {
          return (
            <WidgetOverviewCardMolecule
              key={index}
              iconName={item.iconName}
              title={item.title}
              info={item.info}
              tooltip={item.tooltip}
            />
          );
        })}
      </div>
    );
  }
}

export { WidgetOverviewPanelMolecule };