import React from 'react';
import classNames from 'classnames';

import styles from './ChartTypeList.less';

const chartTypeObject = [
  { name: '全部', icon: 'icon-icon_dropdown_5' },
  { name: '柱形图', icon: 'icon-icon_dropdown_' },
  { name: '折线图', icon: 'icon-icon_dropdown_1' },
  { name: '饼图', icon: 'icon-icon_dropdown_2' },
  { name: '散点图', icon: 'icon-icon_dropdown_4' },
  { name: '其他', icon: 'icon-icon_dropdown_3' }
];

export default function ChartTypeList({ current, changeChartType }) {
  return (
    <ul className={styles.type}>
      {chartTypeObject.map((entry) => {
        return (
          <li
            key={entry.name}
            className={classNames(styles.typeItem, {
              [styles.active]: current === entry.name
            })}
            onMouseEnter={() => changeChartType(entry.name)}
          >
            {entry.name}
          </li>
        );
      })}
    </ul>
  );
}
