import Link from "next/link";

import { sanitizePostHtml } from "@/lib/sanitize-content";
import type { SiteContentBlock } from "@/lib/site-content";

export function CmsPageBlocks({ blocks }: { blocks: SiteContentBlock[] }) {
  return (
    <div className="space-y-10">
      {blocks.map((block, index) => {
        const key = `${block.type}-${index}`;
        switch (block.type) {
          case "hero":
            return (
              <header key={key} className="text-center">
                <div className="ctkp-rule mx-auto mb-8 w-20 opacity-80" aria-hidden />
                {block.title ? (
                  <h1 className="font-ctkp-display text-[2rem] font-semibold leading-[1.12] tracking-tight text-stone-100 sm:text-[2.35rem]">
                    {block.title}
                  </h1>
                ) : null}
                {block.subtitle ? (
                  <p className="mx-auto mt-4 max-w-2xl text-[15px] leading-relaxed text-stone-400">
                    {block.subtitle}
                  </p>
                ) : null}
                {block.ctaLabel && block.ctaHref ? (
                  <p className="mt-8">
                    <Link href={block.ctaHref} className="ctkp-text-link">
                      {block.ctaLabel}
                    </Link>
                  </p>
                ) : null}
              </header>
            );
          case "richText": {
            const html = sanitizePostHtml(block.html ?? "");
            if (!html) return null;
            return (
              <section
                key={key}
                className="prose prose-invert max-w-none text-[15px] leading-[1.88] text-stone-400"
                dangerouslySetInnerHTML={{ __html: html }}
              />
            );
          }
          case "section":
            return (
              <section key={key}>
                {block.title ? (
                  <h2 className="font-ctkp-display mb-3 text-lg font-semibold text-amber-100/90">
                    {block.title}
                  </h2>
                ) : null}
                {block.body ? (
                  <p className="whitespace-pre-wrap text-[15px] leading-[1.88] text-stone-400">
                    {block.body}
                  </p>
                ) : null}
              </section>
            );
          case "cta":
            return (
              <section
                key={key}
                className="rounded-2xl border border-amber-950/25 bg-stone-950/35 px-5 py-6 sm:px-6 sm:py-7"
              >
                {block.title ? (
                  <h2 className="font-ctkp-display text-base font-semibold text-amber-100/90 sm:text-lg">
                    {block.title}
                  </h2>
                ) : null}
                {block.body ? (
                  <p className="mt-2 whitespace-pre-wrap text-sm leading-relaxed text-stone-500">
                    {block.body}
                  </p>
                ) : null}
                {block.buttonLabel && block.buttonHref ? (
                  <p className="mt-4">
                    <Link href={block.buttonHref} className="ctkp-text-link text-sm">
                      {block.buttonLabel}
                    </Link>
                  </p>
                ) : null}
              </section>
            );
          default:
            return null;
        }
      })}
    </div>
  );
}