import type { FC } from 'react';
import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import './step-indicator.scss';

const CLASS_NAME = 'StepIndicator';
export interface StepIndicatorProps {
    className?: string;
    glyphIconName: any;
    variant: 'error' | 'warning' | 'success' | 'info' | 'revision' | 'neutral';
    testId?: string;
}

export const StepIndicator: FC<StepIndicatorProps> = ({
    className,
    glyphIconName,
    testId = CLASS_NAME,
    variant,
}) => {
    return (
        <div
            className={cx(CLASS_NAME, className, `variant-${variant}`)}
            data-testid={testId}
        >
            <div className="glyphIconWrapper">
                <GlyphIcon name={glyphIconName} size={12} />
            </div>
        </div>
    );
};