/** @jsx jsx */
import { css, jsx } from "@emotion/core";
// import * as React from "react";

import { IconAtom } from "../Icon/IconAtom";

// @ts-ignore
import COLORS from "../../constants/colors";

const CIRCLE_TYPES = {
  DEFAULT: css`
    width: 60px;
    height: 60px;
    background-color: rgba(24, 183, 188, 0.2);
    padding: 15px;
    border-radius: 100%;
    color: ${COLORS.GREEN.DARKER};
  `,
};

interface IProps {
  className?: string;
  typeCircle?: string;
  iconName?: string;
  iconType?: string;
  iconSize?: string;
  css?: any;
}

const CircleIconAtom = (
  {
    typeCircle = "",
    iconName = "",
    iconType = "",
    iconSize = "",
  ...props}: IProps,
) => {
  return (
    <div      
      className={props.className}
      css={[CIRCLE_TYPES[typeCircle], props.css]}
    >
      <IconAtom
        {...props}
        name={iconName}
        type={iconType}
        size={iconSize}
      />
    </div>
  );
};

CircleIconAtom.displayName = "CircleIconAtom";

export { CircleIconAtom };