"use client";
import React from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { Button } from "@heroui/react";
import { useSetAtom } from "jotai";
import { useTranslations } from "next-intl";
import { loginModalAtom } from "@/components/state/loginAtom";
import DynamicButton from "@/components/button";

export default function RequireLoginPage() {
  const router = useRouter();
  const setLoginModal = useSetAtom(loginModalAtom);
  const t = useTranslations("AUTH"); // الترجمة من namespace AUTH

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-gray-50 to-gray-100 text-center px-6">
      <div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 space-y-6">
        <div className="flex flex-col items-center space-y-4">
          <Image
            src="https://cdn-icons-png.flaticon.com/512/6141/6141384.png"
            alt={t("login_required_alt")}
            width={100}
            height={100}
            className="drop-shadow-md"
          />

          <h1 className="text-2xl font-bold text-gray-800">
            {t("login_required_title")}
          </h1>

          <p className="text-gray-500 text-sm leading-relaxed">
            {t("login_required_message")}
          </p>
        </div>
        <div className="flex flex-row items-center gap-4">
          {" "}
          <DynamicButton
            fullWidth
            className="bg-primary text-white w-full py-2 rounded-lg hover:bg-primary/80 transition font-medium"
            onClick={() => setLoginModal(true)}
          >
            {t("login_now")}
          </DynamicButton>
          <DynamicButton
            fullWidth
            variant="flat"
            className="w-full text-gray-500 hover:text-gray-700 font-medium"
            onClick={() => router.push("/")}
          >
            {t("back_home")}
          </DynamicButton>
        </div>
      </div>

      <footer className="mt-10 text-sm text-gray-400">
        &copy; {new Date().getFullYear()} Ataya Platform
      </footer>
    </div>
  );
}