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

export function AuthPromptModal() {
	const { t } = useTranslation();
	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">
					{t("auth.joinGearBox")}
				</h3>
				<p className="text-sm text-gray-600 mb-6">
					{t("auth.signInDescription")}
				</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}
					>
						{t("auth.signIn")}
					</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}
					>
						{t("auth.createAccount")}
					</Link>
				</div>
			</div>
		</div>
	);
}