import { dismissRestartBanner, useRestartBanner } from "./restartBanner";
import { focusRing } from "@/ui/classes";

export default function RestartBanner() {
	const raised = useRestartBanner();
	if (!raised) return null;
	return (
		<div
			role="status"
			className="flex items-center gap-3 border-b border-amber-300 bg-amber-50 px-4 py-2 text-sm text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100"
		>
			<span className="flex-1">Changes saved. Restart nxdns to apply.</span>
			<button
				type="button"
				onClick={dismissRestartBanner}
				className={`rounded border border-amber-400 px-2 py-1 text-xs ${focusRing} dark:border-amber-700`}
			>
				Dismiss
			</button>
		</div>
	);
}
