import { FC, PropsWithChildren, useEffect, useState } from 'react';

export type DelayedProps = PropsWithChildren<{
    delayMs?: number;
}>;

export const Delayed: FC<DelayedProps> = ({ delayMs = 200, children }: DelayedProps) => {
    const [timedOut, setTimedOut] = useState(delayMs <= 0);

    useEffect(() => {
        if (delayMs > 0) {
            const timer = setTimeout(() => setTimedOut(true), delayMs);
            return () => clearTimeout(timer);
        }
    }, [delayMs]);

    return timedOut ? children : null;
};