"use client";

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

import { useAuth } from "@/components/auth/authContext";

/**
 * SessionIndicator (RHL-032)
 *
 * Shows a small inline indicator when:
 * - the initial session check is running (status === "loading")
 * - a background revalidation is running (isValidating === true)
 *
 * UX:
 * - Keep it subtle and non-blocking.
 * - Text is German.
 */
export default function SessionIndicator() {
	const { status, isValidating } = useAuth();

	const show = status === "loading" || Boolean(isValidating);
	if (!show) 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>
	);
}