"use client";

/**
 * BlogPostContent - Client wrapper for blog post content
 *
 * Provides TextSizeProvider context for TextSizeControl and TextSizeWrapper
 * which require client-side state for text size preferences.
 */

import { ReactNode } from "react";
import { TextSizeProvider } from "@/lib/contexts/TextSizeContext";
import TextSizeControl from "./TextSizeControl";
import TextSizeWrapper from "./TextSizeWrapper";
import TableOfContents from "./TableOfContents";
import { proseClasses } from "./ProseConfig";

interface BlogPostContentProps {
  lang: "ar" | "en";
  children: ReactNode;
}

export default function BlogPostContent({
  lang,
  children,
}: BlogPostContentProps) {
  return (
    <TextSizeProvider>
      <div className="flex flex-col lg:flex-row gap-12">
        {/* Article */}
        <article className="flex-1 min-w-0 max-w-4xl mx-auto lg:mx-0">
          {/* MDX Content */}
          <TextSizeWrapper>
            <div className={proseClasses}>{children}</div>
          </TextSizeWrapper>
        </article>

        {/* Sidebar */}
        <aside className="w-full lg:w-80 flex-shrink-0 space-y-6">
          <TextSizeControl lang={lang} />
          <div className="hidden lg:block">
            <TableOfContents lang={lang} />
          </div>
        </aside>
      </div>
    </TextSizeProvider>
  );
}

export type { BlogPostContentProps };