import { css, keyframes } from "@emotion/react";
import styled from "@emotion/styled";
import { StyledLoaderProps } from "./Loader";

const spin = keyframes`
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
`;

const StyledLoader = styled.div<StyledLoaderProps>`
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(transparent 10%, hsl(234, 82%, 56%));
  animation: ${spin} 1.4s linear infinite;

  &::after {
    width: 32px;
    height: 32px;
    position: absolute;
    inset: 0 0 0 0;
    background-color: hsl(0, 100%, 100%);
    border-radius: 50%;
    content: "";
    margin: auto;
  }

  ${({ size }) => {
    return (
      size &&
      css`
        width: ${size}px;
        height: ${size}px;

        &::after {
          width: ${size * 0.75}px;
          height: ${size * 0.75}px;
        }
      `
    );
  }}

  ${({ background, color }) => {
    return css`
      background: conic-gradient(transparent 10%, ${color});

      &::after {
        background-color: ${background};
      }
    `;
  }}
`;

export default StyledLoader;