"use client";

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

import { useAuth } from "@/components/auth/authContext";
import { useDebouncedVisibility } from "@/lib/frontend/hooks/useDebouncedVisibility";
import {
	SESSION_INDICATOR_DELAY_MS,
	SESSION_INDICATOR_MIN_VISIBLE_MS,
} from "@/lib/frontend/ui/uxTimings";

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

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

	const visible = useDebouncedVisibility(isActive, {
		delayMs: SESSION_INDICATOR_DELAY_MS,
		minVisibleMs: SESSION_INDICATOR_MIN_VISIBLE_MS,
	});

	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>
	);
}