import React from 'react';
import { colorPond } from './data';
import './index.scss';

/**
 * 颜色池 提供可选颜色
 * @param color 初始颜色
 * @param onChange 颜色变更回调函数
 * @return {*}
 * @constructor
 */
const ColorPond = ({ color = '', dark, onChange }: IColorPond) => {
  return (
    <ul className="compact">
      {colorPond.map((item) => (
        <li
          key={item}
          className={color === item ? 'active' : ''}
          onClick={() => onChange({ hex: item })}
          style={{ backgroundColor: item }}
        />
      ))}
    </ul>
  );
};

export default ColorPond;

export interface IColorPond {
  color?: string;
  dark?: boolean;
  onChange?: Function;
}