import React from 'react';
import { Wrapper, ColorWrapper } from './colorSelector1.styles';
import { Tooltip } from 'antd';
import { CheckOutlined } from '@ant-design/icons';

const Color = ({
  color,
  label,
  selected,
  onClick
}) => /*#__PURE__*/React.createElement(Tooltip, {
  placement: "top",
  title: label
}, /*#__PURE__*/React.createElement(ColorWrapper, {
  color: color,
  onClick: onClick
}, selected && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckOutlined, null))));

const ColorSelector = ({
  options,
  value,
  onChange
}) => {
  if (!options || options.length === 0) return null;
  return /*#__PURE__*/React.createElement(Wrapper, null, options.map(({
    label,
    value: val,
    color
  }, i) => /*#__PURE__*/React.createElement(Color, {
    key: i,
    color: color,
    label: label,
    selected: val === value,
    onClick: () => {
      onChange(val);
    }
  })));
};

export default ColorSelector;