"use client";

import type { BlockquoteBlockPayload } from "@/lib/blog-blocks";
import { Quote } from "lucide-react";

interface BlogBlockquoteProps {
  payload: BlockquoteBlockPayload;
}

export function BlogBlockquote({ payload }: BlogBlockquoteProps) {
  const { content, citation } = payload;
  if (!content.trim()) return null;

  return (
    <figure className="my-8 not-prose">
      <blockquote className="relative rounded-xl border border-border bg-muted/40 px-6 py-2 pr-14 text-foreground shadow-sm">
        <Quote
          className="absolute right-4 top-4 size-8 text-muted-foreground/40"
          aria-hidden
        />
        <div
          className="blog-blockquote-content text-lg leading-relaxed text-justify [&_p]:my-2 [&_a]:text-primary [&_a]:underline hover:[&_a]:no-underline"
          dangerouslySetInnerHTML={{ __html: content }}
        />
        {citation ? (
          <footer className="mt-4 border-t border-border/60 pt-4">
            <cite className="text-sm text-muted-foreground not-italic">
              — {citation}
            </cite>
          </footer>
        ) : null}
      </blockquote>
    </figure>
  );
}