import { connection } from "next/server";

import { CharacterDirectory } from "@/components/public/character-directory";
import { SiteHeader } from "@/components/public/site-header";
import { loadPublicDirectory } from "@/lib/content/loaders";

export default async function HomePage() {
  await connection();
  const characters = await loadPublicDirectory();

  return (
    <div className="min-h-svh bg-background">
      <SiteHeader />
      <main className="mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 sm:py-14">
        <header className="mb-8 max-w-3xl space-y-3">
          <p className="text-sm font-medium text-primary">คลังคู่มือตัวละคร</p>
          <h1 className="font-heading text-3xl font-semibold tracking-tight sm:text-4xl">
            หาคู่มือที่ต้องการ แล้วเริ่มจัดทีมได้เลย
          </h1>
          <p className="text-base leading-7 text-muted-foreground sm:text-lg">
            ค้นหาตามชื่อ ธาตุ หรือบทบาท ทุกหน้าจัดรูปแบบมาให้อ่านง่ายทั้งมือถือและเดสก์ท็อป
          </p>
        </header>
        <CharacterDirectory characters={characters} />
      </main>
    </div>
  );
}