import styled, { keyframes } from 'styled-components';
import { LoaderSizes, LoaderProps } from 'types';

export const LoaderContainer = styled.div`
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 3rem 0;
`;

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

const handleSize = (size?: LoaderSizes) => {
	switch (size) {
		case LoaderSizes.small:
			return `
				border-width: 0.25rem;
				height: 1.8rem;
				width: 1.8rem;
			`;
		case LoaderSizes.large:
			return `
				border-width: 0.4rem;
				height: 3.2rem;
				width: 3.2rem;
			`;
		case LoaderSizes.medium:
		default:
			return `
				border-width: 0.325rem;
				height: 2.4rem;
				width: 2.4rem;
			`;
	}
};

export const Loader = styled.div<LoaderProps>`
	animation: ${rotate} 0.8s infinite ease-in-out;
	border-color: #945ffa;
	border-radius: 50%;
	border-style: solid;
	border-top-color: #fcca00;
	display: inline-block;
	margin-right: 1rem;
	-webkit-animation: ${rotate} 0.8s infinite ease-in-out;
	${({ size }) => handleSize(size)}
`;

Loader.defaultProps = { size: LoaderSizes.medium };