import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useEffect, useState } from 'react';
import { Text } from '@primer/react';
const DOTS = ['.', '..', '...'];
export function BusyDots({ color = 'fg.muted', fontSize = 0, ml = 1, ariaLabel = 'In progress', intervalMs = 450, }) {
    const [index, setIndex] = useState(0);
    useEffect(() => {
        const timer = window.setInterval(() => {
            setIndex(prev => (prev + 1) % DOTS.length);
        }, intervalMs);
        return () => window.clearInterval(timer);
    }, [intervalMs]);
    return (_jsxs(Text, { as: "span", sx: {
            ml,
            color,
            fontSize,
            display: 'inline-block',
            position: 'relative',
            fontWeight: 'semibold',
        }, "aria-label": ariaLabel, children: [_jsx(Text, { as: "span", sx: { visibility: 'hidden' }, children: "..." }), _jsx(Text, { as: "span", sx: {
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    whiteSpace: 'nowrap',
                }, children: DOTS[index] })] }));
}
export default BusyDots;
