import React, {CSSProperties, PropsWithChildren, useMemo} from "react";
import {IconProp} from "@fortawesome/fontawesome-svg-core";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

export type WithChildren = PropsWithChildren<Record<never, never>>;

export type WithStyle = { style?: CSSProperties }

interface IconProps {
  value: IconProp
  spin?: boolean
  flash?: boolean
  subtle?: boolean
}

export function Icon({value, spin, flash, subtle}: IconProps) {
  const style: CSSProperties = useMemo(() => {
    return subtle ? {opacity: 0.5} : {};
  }, [subtle]);

  return <FontAwesomeIcon style={style} icon={value} spin={spin} beatFade={flash}/>;
}