import styled from 'styled-components';
import React from 'react';
import { cssUnitCalc } from '../../utils';
export const Spinner = ({ strokeWidth = 3, size = 16, color = '#747a8c', ...rest }) => (
    <StyledSpinner viewBox="0 0 50 50" color={color} size={size} {...rest}>
        <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth={strokeWidth} />
    </StyledSpinner>
);
export default Spinner;
const StyledSpinner = styled.svg<any>`
    animation: rotate 1s linear infinite;
    margin: 0;
    width: ${p => cssUnitCalc(p.size)};
    height: ${p => cssUnitCalc(p.size)};

    & .path {
        stroke: ${p => p.color || '#747a8c'};
        stroke-linecap: round;
        animation: dash 1.5s ease-in-out infinite;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 150;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -35;
        }
        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -124;
        }
    }
`;