import Link from "next/link";
import { appRouter } from "@repo/core-api";
import { bindAllProduction } from "../server/bind-production";

export default async function Home() {
  await bindAllProduction();
  const caller = appRouter.createCaller({});

  const [siteSettings, header, articles] = await Promise.all([
    caller.marketingPages.siteSettings({}),
    caller.navigation.header({}),
    caller.blog.listArticles({ status: "published", limit: 20 }),
  ]);

  return (
    <main>
      <header>
        <h1>{siteSettings.siteName}</h1>
        {siteSettings.siteDescription ? (
          <p>{siteSettings.siteDescription}</p>
        ) : null}
        <nav>
          <ul>
            {header.items.map((item) => (
              <li key={item.href}>
                <Link href={item.href}>{item.label}</Link>
              </li>
            ))}
          </ul>
        </nav>
      </header>

      <section>
        <h2>Latest articles</h2>
        {articles.length === 0 ? (
          <p>No published articles yet.</p>
        ) : (
          <ul>
            {articles.map((a) => (
              <li key={a.id}>
                <Link href={`/blog/${a.slug}`}>{a.title}</Link>
              </li>
            ))}
          </ul>
        )}
      </section>
    </main>
  );
}