"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";

export default function ServerErrorPage() {
  const t = useTranslations("ERROR_500");
  const router = useRouter();

  return (
    <main className="min-h-[90vh] flex flex-col items-center justify-center bg-[#FBF9F6] text-center px-6">
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        className="max-w-md border p-4 bg-white rounded-2xl"
      >
        <Image
          src="/images/500.png"
          alt={t("alt")}
          width={220}
          height={220}
          className="mx-auto mb-6"
        />

        <h1 className="text-3xl font-extrabold text-[#0F5132] mb-3">
          {t("title")}
        </h1>
        <p className="text-gray-600 mb-8">{t("description")}</p>

        <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
          <button
            onClick={() => router.refresh()}
            className="px-6 py-3 rounded-xl text-white bg-[#1B7A50] hover:bg-[#14623c] transition-colors"
          >
            {t("try_again")}
          </button>
          <button
            onClick={() => router.push("/")}
            className="px-6 py-3 rounded-xl border border-gray-300 hover:bg-gray-100 transition-colors"
          >
            {t("back_home")}
          </button>
        </div>
      </motion.div>
    </main>
  );
}