"use client";

import React from "react";
import { Loader2 } from "lucide-react";

import { useAuth } from "@/components/auth/authContext";
import { useDebouncedVisibility } from "@/lib/frontend/hooks/useDebouncedVisibility";

export default function SessionIndicator() {
	const { status, isValidating } = useAuth();

	const isActive = status === "loading" || Boolean(isValidating);

	// Debounce policy:
	// - Show only if it lasts longer than 200ms.
	// - Once shown, keep it visible for at least 250ms to avoid blinking.
	const visible = useDebouncedVisibility(isActive, {
		delayMs: 200,
		minVisibleMs: 250,
	});

	if (!visible) return null;

	return (
		<div
			className="flex items-center gap-2"
			aria-live="polite"
			title="Sitzung wird geprüft"
		>
			<Loader2
				className="h-4 w-4 animate-spin text-muted-foreground"
				aria-hidden="true"
			/>
			<span className="hidden text-xs text-muted-foreground md:inline">
				Sitzung wird geprüft…
			</span>
		</div>
	);
}