import type { FC } from 'react';
import React from 'react';
import { formatMessage } from '@theorchard/suite-i18n';
import { Illustration } from '@theorchard/suite-icons';
import cx from 'classnames';

export const CLASS_NAME = 'LoadingPageIndicator';

export interface LoadingPageIndicatorProps {
    className?: string;
    style?: React.CSSProperties;
    testId?: string;
    title?: string | false;
}

/**
 * LoadingPageIndicator is an animated illustrations used as a placeholder whilst a full page is loading.
 *
 * @type atom
 * @status live
 * @tags feedback
 */
export const LoadingPageIndicator: FC<LoadingPageIndicatorProps> = ({
    className,
    style,
    testId = CLASS_NAME,
    title = formatMessage('loading_pleaseWait').replace('...', ''),
}) => (
    <div data-testid={testId} className={cx(CLASS_NAME, className)} style={style}>
        <Illustration className={`${CLASS_NAME}-illustration`} name="spinningVinyl" size={150} />

        {title ? <p className={`${CLASS_NAME}-title`}>{title}</p> : null}
    </div>
);