import Image from "next/image";
import type { Chapter } from "@afterlife/shared";
import { formatTextToHtml } from "@/lib/format";

interface ChapterContentProps {
  chapter: Chapter;
}

export function ChapterContent({ chapter }: ChapterContentProps) {
  return (
    <article className="max-w-2xl mx-auto">
      {/* Chapter indicator */}
      <div className="mb-10">
        <div className="flex items-center gap-4 mb-4">
          <span className="text-amber-500/80 font-display text-sm tracking-[0.2em]">
            {String(chapter.order).padStart(2, "0")}
          </span>
          <div className="h-px flex-1 bg-white/10" />
        </div>
        <h2 className="text-3xl sm:text-4xl font-display font-bold leading-tight tracking-tight">
          {chapter.title}
        </h2>
      </div>

      {chapter.coverImage && (
        <div className="relative aspect-video rounded-lg overflow-hidden mb-10">
          <Image
            src={chapter.coverImage.url}
            alt={chapter.coverImage.alternativeText || chapter.title}
            fill
            className="object-cover"
          />
        </div>
      )}

      <div
        className="chapter-prose"
        dangerouslySetInnerHTML={{ __html: formatTextToHtml(chapter.content) }}
      />
    </article>
  );
}