import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {Separator} from "@/components/ui/separator";

import {PortableContent} from "@/components/PortableContent";
import type {Chapter} from "@/lib/sanity/types";

type Props = {
  chapter: Chapter;
};

export function ChapterContentPanel({chapter}: Props) {
  return (
    <Card>
      <CardHeader className="pb-4">
        <CardTitle className="text-2xl tracking-tight">{chapter.title}</CardTitle>
      </CardHeader>
      <Separator />
      <CardContent className="pt-2">
        <PortableContent value={chapter.body || []} />
      </CardContent>
    </Card>
  );
}