import React, {CSSProperties} from 'react';
import cls from 'classnames';
import tinyColor from 'tinycolor2';
import { Colors } from '@core0/theme';
import cn from './spinner.module.styl';

interface SpinnerProps {
    color?: string;
    background?: string;
    size?: 'small' | 'regular' | 'large';
    style?: CSSProperties;
    className?: string;
}

/**
 * Spinner effect used for resources loading
 */
export const Spinner = (props: SpinnerProps) => {
    const {
        className,
        style,
        size = 'regular',
        color = Colors.secondary,
        background = Colors.commonBg
    } = props;

    return (
        <span className={cls(cn.spinner, cn[size], className)} style={{
            '--spinner-color': color,
            '--spinner-color-1': tinyColor(color).setAlpha(.45),
            '--spinner-color-2': tinyColor(color).setAlpha(.5),
            '--spinner-bg': background,
            ...style
        } as CSSProperties}>
            <span className={cn.inner} />
        </span>
    );
};