import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect } from 'react'

export default function HomeAliasPage() {
  const router = useRouter()

  useEffect(() => {
    void router.replace('/')
  }, [router])

  return (
    <main className="container mx-auto px-4 py-12">
      <div className="mx-auto max-w-xl rounded-xl border border-gray-200 bg-white p-6 text-center shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Redirecting to DBIS Explorer</h1>
        <p className="mt-3 text-sm leading-7 text-gray-600 dark:text-gray-400">
          The legacy <code className="rounded bg-gray-100 px-1 py-0.5 text-xs dark:bg-gray-900">/home</code> route now redirects to the main explorer landing page.
        </p>
        <Link
          href="/"
          className="mt-5 inline-flex rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700"
        >
          Continue to the explorer
        </Link>
      </div>
    </main>
  )
}
