import type { BlogPostContentBlock } from "@/data/blog-post-detail";
import Image from "next/image";

export default function BlogPostContentBlocks({
  blocks,
}: {
  blocks: BlogPostContentBlock[];
}) {
  return (
    <>
      {blocks.map((block) => {
        if (block.kind === "paragraph") {
          return (
            <p key={block.id} className="paragraph">
              {block.text}
            </p>
          );
        }

        return (
          <blockquote key={block.id} className="testimonial">
            <Image
              src={block.icon.src}
              alt={block.icon.alt}
              width={block.icon.width}
              height={block.icon.height}
            />
            <p>{block.text}</p>
            <cite className="name">{block.cite}</cite>
          </blockquote>
        );
      })}
    </>
  );
}