import React from "react";
import mySvg from "../../assets/loader.svg";
import styled, { keyframes } from "styled-components";

const LoaderEl = styled.div`
  position: absolute;
  left: calc(50% - 70px);
  top: calc(50% - 70px);
  display: inline-block;
`;

export const Loader = (): JSX.Element => (
  <LoaderEl className="blue-txt">
    <img width="70" src={mySvg} alt="A Loader" />
  </LoaderEl>
);

const glow = keyframes`
0% { 
  transform: scale(0.9);
  filter: drop-shadow(3px 4px 6px teal); 
}
100% {
  transform: scale(1);
  filter: drop-shadow(0px 0px 0px white); 
}`;

const Img = styled.img`
  animation: ${glow} 800ms ease-out infinite;
`;

export const Loader2 = ({ logo }: any): JSX.Element => (
  <div className="grid full">
    <Img src={logo} alt="A Loader" />
  </div>
);

Loader.Custom = ({logo}: any): JSX.Element => (
  <LoaderEl>
    <Img width="70" src={logo} alt="A Loader" />
  </LoaderEl>
);

Loader.Spinner = ({ size = 2, color = "inherit" }): JSX.Element => {
  const fontSize = (6 - size < 0 ? 1 : 6 - size) / 2 + "em";
  return <i className="fa fa-spinner spin" style={{ fontSize, color }}></i>;
};

export default Loader;