import React from 'react';

import {COLORS} from 'src/main/defs';

import './AppearancePopup.scss';

export const AppearancePopup = (props) => {
  const onColorClick = (event) => {
    props.onColorChange(event.target.dataset.color);
  };

  return (
    <div className="AppearancePopup clearfix">
      {COLORS.map((color, index) => {
        return (
          <a
            key={index}
            data-color={color}
            style={{background: color}}
            onClick={onColorClick}
          >
          </a>
        );
      })}
    </div>
  );
};
