import React, { FunctionComponent } from "react";

import "./styles.scss";

export interface ILoaderProps {
  scale?: number;
  color?: "dark" | "white";
  customSpinnerSize?: number;
  isInline?: boolean;
}

export const Loader: FunctionComponent<ILoaderProps> = (props) => {
  const { scale = 1, color = "dark", customSpinnerSize, isInline } = props;

  return (
    <div
      style={{
        height: 32 * scale,
        width: 32 * scale,
        margin: "0 5px",
        borderWidth: customSpinnerSize === undefined ? 2 * scale : customSpinnerSize,
        display: isInline ? "inline-block" : "block"
      }}
      className={`c-loader c-loader__${color}`}
    />
  );
};
