"use client";

import { usePageBySlug } from "../hooks/use-page-by-slug";
import { PageHero } from "./page-hero";

export type PageContentProps = {
  slug: string;
};

export function PageContent({ slug }: PageContentProps) {
  const { data: page } = usePageBySlug(slug);

  if (!page) return null;

  return (
    <article className="mx-auto max-w-3xl">
      <PageHero hero={page.hero} />
      <div className="prose text-foreground">
        <pre className="whitespace-pre-wrap text-sm">
          {JSON.stringify(page.layout, null, 2)}
        </pre>
      </div>
    </article>
  );
}