import { ShieldCheck } from "lucide-react";
import Link from "next/link";
import { useTranslation } from "react-i18next";
export default function ShowLoginDialog({setShowLoginDialog}) {
    const {t}=useTranslation()
  return (
    <>
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-4 py-8">
        <div className="w-full max-w-md rounded-3xl bg-white p-6 shadow-2xl border border-gray-200">
          <div className="flex items-center gap-3 mb-5">
            <ShieldCheck className="w-7 h-7 text-amber-500" />
            <div>
              <h3 className="text-lg font-semibold text-gray-900">{t("loginRequired")}</h3>
              <p className="text-sm text-gray-600">{t("loginRequiredDesc")}</p>
            </div>
          </div>
          <div className="space-y-4">
            <div className="rounded-2xl bg-gray-50 p-4">
              <p className="text-sm text-gray-700">{t("loginPrompt")}</p>
            </div>
            <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
              <button
                type="button"
                onClick={() => setShowLoginDialog(false)}
                className="w-full sm:w-auto px-5 py-3 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors"
              >
                {t("close")}
              </button>
              <Link href="/login" className="w-full sm:w-auto px-5 py-3 rounded-xl bg-amber-500 text-white font-semibold text-center hover:bg-amber-600 transition-colors">
                {t("login")}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}