'use client'

import { useGlobal } from '@/lib/global'
import { isBrowser } from '@/lib/utils'
import { useEffect } from 'react'
import { useRouter } from 'next/router'

/**
 * 404 頁面
 */
const Layout404 = () => {
  const router = useRouter()
  const { locale } = useGlobal()
  useEffect(() => {
    // 延遲 3 秒若載入失敗就返回首頁
    setTimeout(() => {
      const article = isBrowser && document.getElementById('article-wrapper')
      if (!article) {
        router.push('/').then(() => {
          // console.log('找不到頁面', router.asPath)
        })
      }
    }, 3000)
  }, [router])

  return (
    <>
      <div className='md:-mt-20 text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
        <div className='dark:text-gray-200'>
          <h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'>
            <i className='mr-2 fas fa-spinner animate-spin' />
            404
          </h2>
          <div className='inline-block text-left h-32 leading-10 items-center'>
            <h2 className='m-0 p-0'>{locale.NAV.PAGE_NOT_FOUND_REDIRECT}</h2>
          </div>
        </div>
      </div>
    </>
  )
}

export { Layout404 }