import type { BlockquoteBlockPayload } from "@/lib/blog-blocks";
import { sanitizeBlockquoteContent } from "@/lib/blockquote-content";
import { blockquoteVariantClass } from "@/components/blog-blockquote-styles";
import { BlogBlockquoteDecorations } from "@/components/blog-blockquote-decorations";
import { cn } from "@/lib/utils";
import { Quote } from "lucide-react";

interface BlogPullquoteProps {
  payload: BlockquoteBlockPayload;
}

export function BlogPullquote({ payload }: BlogPullquoteProps) {
  const { content, citation, variant = "gray" } = payload;
  const cleanContent = sanitizeBlockquoteContent(content);
  if (!cleanContent.trim()) return null;

  return (
    <figure className="my-10 not-prose">
      <blockquote
        className={cn(
          "blog-blockquote blog-pullquote text-foreground",
          blockquoteVariantClass[variant]
        )}
      >
        <BlogBlockquoteDecorations variant={variant} />
        <Quote className="blog-blockquote__icon" aria-hidden />
        <div
          className="blog-blockquote__content"
          dangerouslySetInnerHTML={{ __html: cleanContent }}
        />
        {citation ? (
          <footer className="blog-blockquote__footer">
            <cite className="text-sm text-muted-foreground not-italic">
              {citation}
            </cite>
          </footer>
        ) : null}
      </blockquote>
    </figure>
  );
}