import React from "react";
import styled from "styled-components";
import { colors } from "@theme/colors";

const Loader = styled((props) => (
  <div {...props}>
    <div>
      <div />
    </div>
  </div>
))<{ $color?: typeof colors }>`
  overflow: hidden;
  font-size: 200px;
  width: 1em;
  height: 1em;

  @keyframes rotation {
    0% { transform: rotate(0deg) }
    50% { transform: rotate(180deg) }
    100% { transform: rotate(360deg) }
  }

  & > div {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;

    & > div {
      box-sizing: content-box;
      position: absolute;
      animation: rotation 1s linear infinite;
      width: 80%;
      height: 80%;
      top: 10%;
      left: 10%;
      border-radius: 50%;
      box-shadow: 0 0.02em 0 0 ${({ $color }) => $color || colors.white};
      transform-origin: 50% 51%;
    }
  }
`;

export default Loader;