import styled, { css, keyframes } from 'styled-components'

import { LoaderProps } from './types'

const animation = keyframes`
  0%,
  100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.0);
  }
`

export const Wrapper = styled.div<LoaderProps>`
  position: relative;
  margin: 0 auto;
  
  ${({ diameter = 1.18 }) => (
    diameter
      ? css`
            width: ${diameter}rem;
            height: ${diameter}rem;
          `
      : ''
  )}

  :before,
  :after {
    content: '';
    position: absolute;
    top: 0;
    background-color: ${({ color }) => color};
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: ${animation} 1s infinite ease-in-out;
  }

  :before {
    left: -130%;
    animation-delay: 0.2s;
  }
  
  :after {
    left: 130%;
    animation-delay: -0.2s;
  }
`

export const Circles = styled.div<LoaderProps>`
  background-color: ${({ color }) => color};
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: ${animation} 1s infinite ease-in-out;
`