import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const PlaceholderIcon = styled.div`
  width: ${props => props.width};
  height: ${props => props.height};
  background: ${props => props.color};
  border-radius: 50%;
  margin: 0 ${props => props.margin};
  opacity: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  svg {
    fill: white;
    width: ${props => props.iconWidth};
    height: ${props => props.iconHeight};
  }

  &:hover {
    opacity: 100%;
  }
`;

const CircleIcon = ({ width, height, margin, color, iconWidth, iconHeight, children }) => {
  return (
    <PlaceholderIcon
      width={width}
      height={height}
      margin={margin}
      color={color}
      iconWidth={iconWidth}
      iconHeight={iconHeight}
    >
      {children}
    </PlaceholderIcon>
  );
};

CircleIcon.propTypes = {
  width: PropTypes.string,
  height: PropTypes.string,
  margin: PropTypes.string,
  color: PropTypes.string,
  iconWidth: PropTypes.string,
  iconHeight: PropTypes.string,
};

CircleIcon.defaultProps = {
  width: '16px',
  height: '16px',
  margin: 0,
  iconWidth: '10px',
  iconHeight: '10px',
};

export default CircleIcon;