/**
 * Markdown renderer for public blog posts. Uses react-markdown + remark-gfm
 * for tables/strikethrough, rehype-sanitize for XSS protection.
 *
 * Server component — no "use client" so it streams as static HTML.
 */
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeSanitize from "rehype-sanitize";

export function MarkdownRenderer({ content }: { content: string }) {
  return (
    <div className="prose-blog">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeSanitize]}
        components={{
          h1: ({ children }) => (
            <h1 className="font-display text-ink-primary mt-8 mb-4 text-3xl font-semibold">
              {children}
            </h1>
          ),
          h2: ({ children }) => (
            <h2 className="font-display text-ink-primary mt-8 mb-3 text-2xl font-semibold">
              {children}
            </h2>
          ),
          h3: ({ children }) => (
            <h3 className="font-display text-ink-primary mt-6 mb-2 text-xl font-semibold">
              {children}
            </h3>
          ),
          p: ({ children }) => (
            <p className="text-ink-secondary mb-4 leading-relaxed">{children}</p>
          ),
          ul: ({ children }) => (
            <ul className="text-ink-secondary mb-4 list-disc pl-6 leading-relaxed">{children}</ul>
          ),
          ol: ({ children }) => (
            <ol className="text-ink-secondary mb-4 list-decimal pl-6 leading-relaxed">
              {children}
            </ol>
          ),
          li: ({ children }) => <li className="mb-1.5">{children}</li>,
          a: ({ href, children }) => (
            <a
              href={href}
              className="text-brand-gold hover:underline"
              target={href?.startsWith("http") ? "_blank" : undefined}
              rel={href?.startsWith("http") ? "noopener noreferrer" : undefined}
            >
              {children}
            </a>
          ),
          blockquote: ({ children }) => (
            <blockquote className="border-brand-gold/40 text-ink-muted my-4 border-l-4 pl-4 italic">
              {children}
            </blockquote>
          ),
          code: ({ children, className }) => {
            const isBlock = className?.startsWith("language-");
            if (isBlock) {
              return (
                <code className={`${className} bg-bg-base block rounded-md p-3 text-sm`}>
                  {children}
                </code>
              );
            }
            return (
              <code className="bg-bg-base text-brand-gold rounded px-1.5 py-0.5 text-sm">
                {children}
              </code>
            );
          },
          pre: ({ children }) => (
            <pre className="bg-bg-base border-stroke-subtle my-4 overflow-x-auto rounded-lg border p-3 text-sm">
              {children}
            </pre>
          ),
          table: ({ children }) => (
            <div className="my-4 overflow-x-auto">
              <table className="border-stroke-subtle w-full border-collapse border text-sm">
                {children}
              </table>
            </div>
          ),
          th: ({ children }) => (
            <th className="border-stroke-subtle bg-bg-elevated/50 text-ink-primary border px-3 py-2 text-left font-semibold">
              {children}
            </th>
          ),
          td: ({ children }) => (
            <td className="border-stroke-subtle text-ink-secondary border px-3 py-2">{children}</td>
          ),
          hr: () => <hr className="border-stroke-subtle my-8" />,
          img: ({ src, alt }) =>
             
            src ? (
              <img src={src} alt={alt ?? ""} className="my-4 rounded-lg" loading="lazy" />
            ) : null,
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  );
}