import React from "react";
const StackedFAIcon = ({
  title,
  background,
  color,
  faIconClass,
  svgIconClass,
  loading,
  onClick,
  borderColor,
  fontSize,
  disabled,
  containerClass
}) =>
  loading ? (
    <span className="fa-stack fa-sm pointer marginr14 loader-s dim24" />
  ) : (
    <span
      className={`${containerClass || ''} fa-stack fa-sm pointer marginr10`}
      title={title}
      onClick={disabled ? () => {} : onClick}
      style={{
        ...(borderColor
          ? {
              border: `1px solid  ${borderColor}`,
              borderRadius: "50%",
              boxSizing: "content-box"
            }
          : {}),
        ...(fontSize
          ? {
              fontSize: ` ${fontSize}`
            }
          : {}),
        ...disabled ? {
          opacity: 0.5
        } : {}
      }}
    >
      <i className="fa fa-circle fa-stack-2x" style={{ color: background }} />
      {svgIconClass ? (
        <i className={`svgicons ${svgIconClass} fa-stack-1x`} style={{ color: color }} />
      ) : (
        <i className={`fa ${faIconClass} fa-stack-1x`} style={{ color: color }} />
      )}

    </span>
  );
export default StackedFAIcon;