"use client";
import { useEffect } from 'react'
import { useRouter } from 'next/navigation';
import { emitAuthExpired } from "@/utils/auth/auth-events";

//https://nextjs.org/docs/app/api-reference/file-conventions/error
export default function Error({
  error, 
  retry
}: {
  retry: () => void;
  error: Error & { digest?: string };
}) {
  const router = useRouter();

  let msg = "There was an issue with our storefront. This could be a temporary issue, please try your action again.";
  if(error.name === 'UnauthorizedError') {
    msg = "Authorization Bearer token is required. Will redirect to Login page.";
  }
  const clickHandler = () => {
      if(error.name === 'UnauthorizedError') {
          router.push('/customer/login')
      } else {
        retry();
      }
  };
  useEffect(() => {
      if (error.name === "UnauthorizedError") {
          emitAuthExpired();
      }
    // Log the error to an error reporting service
    console.error(error)
  }, [error])

  return (
    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
      <h2 className="text-xl font-bold">Oh no!</h2>
      <p className="my-2">
        {msg}
      </p>
      <button
        className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
        onClick={clickHandler}
      >
        {error.name === 'UnauthorizedError' ? "To Login" : "Try Again"}
      </button>
    </div>
  );
}