import React from "react";

interface DotProps {
    color?: 'loading' | 'unloading' | 'stops';
    number?: string | number;
}

export const Dot: React.FC<DotProps> = ({ color, number }) => {
    return ( 
        <span className={`fr-circle-badge fr-text-sm ${color === 'loading' ? "fr-loading-badge" : color === "unloading" ? "fr-unloading-badge" : 'fr-stops-badge'}`}>
            {number}
        </span>
    );
};