import React from "react";
import { CirclePicker } from "react-color";
import styled from "styled-components";
import { editorColors } from "./toalbarOptions";

const ColorModal = ({ onChange, color }) => {
  return (
    <Container>
      <CirclePicker colors={editorColors} onChange={onChange} color={color} />
    </Container>
  );
};

const Container = styled.div`
  position: absolute;
  z-index: 3;
  border-radius: 12px;
  border: 1px solid var(--Neutral-20, #dfe5e5);
  background: #fff;
  padding: 16px;
  width: fit-content;
  bottom: 40px;
  left: 0;
  span {
    span {
      div {
        border: 2px solid var(--Neutral-20, #dfe5e5);
      }
    }
  }
`;

export default ColorModal;
