import { Link } from "@tanstack/react-router";
import { useUIStore } from "../stores/uiStore";

export function AuthPromptModal() {
	const showAuthPrompt = useUIStore((s) => s.showAuthPrompt);
	const closeAuthPrompt = useUIStore((s) => s.closeAuthPrompt);

	if (!showAuthPrompt) return null;

	return (
		<div className="fixed inset-0 z-50 flex items-center justify-center">
			<div
				className="absolute inset-0 bg-black/30"
				onClick={closeAuthPrompt}
				onKeyDown={(e) => {
					if (e.key === "Escape") closeAuthPrompt();
				}}
			/>
			<div className="relative bg-white rounded-xl shadow-lg p-6 max-w-sm mx-4 w-full">
				<h3 className="text-lg font-semibold text-gray-900 mb-2">
					Join GearBox
				</h3>
				<p className="text-sm text-gray-600 mb-6">
					To manage your own collection, sign in or sign up.
				</p>
				<div className="flex flex-col gap-3">
					<Link
						to="/login"
						className="w-full text-center px-4 py-2.5 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
						onClick={closeAuthPrompt}
					>
						Sign in
					</Link>
					<Link
						to="/login"
						className="w-full text-center px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
						onClick={closeAuthPrompt}
					>
						Create account
					</Link>
				</div>
			</div>
		</div>
	);
}