import { createRootRoute, Link, Outlet } from "@tanstack/react-router"

export const Route = createRootRoute({
  component: RootLayout,
})

function RootLayout() {
  return (
    <div className="min-h-screen bg-white text-gray-900">
      <header className="border-b px-4 py-3">
        <nav className="mx-auto max-w-5xl flex items-center gap-6">
          <Link to="/" className="text-lg font-bold">
            English App
          </Link>
          <Link to="/toeic" className="text-sm text-gray-600 hover:text-gray-900">
            Luyện đề
          </Link>
          <Link to="/writing" className="text-sm text-gray-600 hover:text-gray-900">
            Writing
          </Link>
          <Link to="/vocab" className="text-sm text-gray-600 hover:text-gray-900">
            Từ vựng
          </Link>
        </nav>
      </header>
      <main className="mx-auto max-w-5xl px-4 py-6">
        <Outlet />
      </main>
    </div>
  )
}
