import { createFileRoute } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { useTRPC } from "@repo/core-trpc";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const Route = createFileRoute("/" as any)({
  component: Home,
});

function Home() {
  const trpc = useTRPC();
  const siteSettings = useQuery(trpc.marketingPages.siteSettings.queryOptions());
  const header = useQuery(trpc.navigation.header.queryOptions());

  if (siteSettings.isPending || header.isPending) {
    return <main>Loading…</main>;
  }
  if (siteSettings.error || header.error) {
    return (
      <main>
        Failed to load: {siteSettings.error?.message ?? header.error?.message}
      </main>
    );
  }

  return (
    <main>
      <header>
        <h1>{siteSettings.data?.siteName} — TanStack edition</h1>
        <nav>
          <ul>
            {header.data?.items.map((item) => (
              <li key={item.href}>
                <a href={item.href}>{item.label}</a>
              </li>
            ))}
          </ul>
        </nav>
      </header>
      <p>This page is rendered by TanStack Router and consumes the same feature packages as the Next.js app.</p>
    </main>
  );
}