import "./styles.css";

export enum LoaderColor {
  White = "white",
  Black = "black",
  Red = "red",
}

type LoaderProps = {
  color?: LoaderColor;
  className?: string;
};

const colorClasses = {
  [LoaderColor.White]: "loader__white",
  [LoaderColor.Black]: "loader__black",
  [LoaderColor.Red]: "loader__red",
};

function Loader({ color = LoaderColor.Black, className }: LoaderProps): JSX.Element {
  return (
    <div className={`loader-container ${className}`}>
      <div className={`loader ${colorClasses[color]}`}>
        <span></span>
      </div>
    </div>
  );
}

export default Loader;