"use client";

import { useSearchParams } from "next/navigation";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";

export default function AuthErrorPage() {
  const params = useSearchParams();
  const errorType = params.get("error");

  const message =
    errorType === "Verification"
      ? "Your login link is no longer valid."
      : "We couldn’t complete your login.";

  const subMessage =
    errorType === "Verification"
      ? "This usually happens when the link was already used, expired, or opened automatically by your email app."
      : "Please request a new login link below.";

  return (
    <div className="flex flex-col items-center justify-center min-h-screen px-6 pb-12 bg-gray-50">
      <div className="bg-white shadow-md rounded-xl p-8 max-w-md w-full text-center border border-gray-200">
        <div className="flex justify-center mb-4">
          <ExclamationTriangleIcon className="h-10 w-10 text-red-500" />
        </div>

        <h1 className="text-2xl font-semibold text-gray-900 mb-2">{message}</h1>

        <p className="text-gray-600 leading-relaxed mb-6">{subMessage}</p>

        <a
          href="/"
          className="
            inline-flex items-center px-5 py-3 rounded-lg
            bg-brandblue text-white font-medium
            hover:bg-brandblue/90 transition
          "
        >
          Request a new login link
        </a>
      </div>

      <p className="mt-6 text-sm text-gray-500">
        Need help? Contact your Domna representative.
      </p>
    </div>
  );
}
