import React, { CSSProperties, VoidFunctionComponent } from 'react';
import './style.css';

export interface SpinnerProps {
    size?: number;
    className?: string;
    circleClassName?: string;
    style?: CSSProperties;
}

const Spinner: VoidFunctionComponent<SpinnerProps> = ({ size, className, circleClassName, style }) => {
    size = size || 24;

    return (
        <div className={ `spinner ${className || ''}` } style={{ height: size, width: size, ...style }}>
            <svg viewBox="0 0 48 48">
                <circle cx="24" cy="24" r="20" className={ `stroke-current ${circleClassName || ''}` } />
            </svg>
        </div>
    );
};

export default Spinner;