import type { FC } from 'react';
import React from 'react';
import cx from 'classnames';

const CLASS_NAME = 'LoadingSpinner';

export interface LoadingSpinnerProps {
    show?: boolean;
    className?: string;
    style?: React.CSSProperties;
    testId?: string;
    size?: 12 | 16 | 24 | 48 | 80;
    /**
     * Shows percentage inside spinner.
     * NOTE: Only visible in size 80.
     */
    percentage?: number;
}

/**
 * LoadingSpinner is used to indicate that the content of a section is loading, or that a background task is running.
 *
 * @type atom
 * @status live
 * @tags feedback
 */
export const LoadingSpinner: FC<LoadingSpinnerProps> = ({
    className,
    style,
    show = false,
    testId = CLASS_NAME,
    size,
    percentage,
}) => (
    <div
        className={cx(CLASS_NAME, className, {
            show,
            [`${CLASS_NAME}-inline`]: size !== undefined,
        })}
        style={style}
        data-testid={testId}
    >
        <div className={cx(`${CLASS_NAME}-inner`, { [`size-${size}`]: size })} />
        {size === 80 && percentage !== undefined && (
            <h3 className={`${CLASS_NAME}-percentage`}>{percentage}%</h3>
        )}
    </div>
);