import { createSignal, Show } from "solid-js";

/**
 * Creates a trigger/signal pair for showing a brief "remote update" flash.
 * Call `fire()` when a remote WebSocket update arrives; `visible()` goes
 * true for `durationMs` then auto-clears.
 */
export function createRemoteFlash(durationMs = 3000) {
    const [visible, setVisible] = createSignal(false);
    let timer: ReturnType<typeof setTimeout> | null = null;

    const fire = () => {
        setVisible(true);
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            setVisible(false);
            timer = null;
        }, durationMs);
    };

    return { visible, fire };
}

interface RemoteUpdateFlashProps {
    when: boolean;
}

/**
 * A small pill that briefly shows "Updated".
 */
export function RemoteUpdateFlash(props: RemoteUpdateFlashProps) {
    return <Show when={props.when}>
        <div class="remote-update-flash inline-flex items-center gap-1 rounded-full bg-emerald-100 border border-emerald-300 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-widest text-emerald-700">
            <svg viewBox="0 0 12 12" class="w-2.5 h-2.5 fill-current"><circle cx="6" cy="6" r="6"/></svg>
            Updated
        </div>
    </Show>;
}