import Image from "next/image";
import Link from "next/link";
import { PageHero, RichText } from "@/components/PageBits";
import { getGallery, getPage } from "@/lib/content";

export const dynamic = "force-dynamic";

export default async function GrupniPage() {
  let page = null;
  let gallery: Awaited<ReturnType<typeof getGallery>> = [];
  try {
    page = await getPage("grupni-treninzi");
    gallery = await getGallery("grupni");
  } catch {}

  return (
    <>
      <PageHero title={page?.headline || "Grupni treninzi"} />
      <div className="mx-auto max-w-6xl px-4 py-12">
        <RichText body={page?.body || ""} />
        {gallery.length > 0 && (
          <div className="mt-10 grid gap-3 sm:grid-cols-2">
            {gallery.map((img) => (
              <div key={img.id} className="relative aspect-video overflow-hidden border border-white/10">
                <Image src={img.path} alt={img.caption || "Grupni"} fill className="object-cover" />
              </div>
            ))}
          </div>
        )}
        <Link
          href="/raspored"
          className="mt-10 inline-block rounded-sm bg-ffl-red px-6 py-3 text-sm font-bold uppercase tracking-wider text-white"
        >
          Pogledaj raspored
        </Link>
      </div>
    </>
  );
}