import { OptixFlowConfig } from '@page-speed/img';
import { MarkdownStylesMap } from '@page-speed/markdown-to-jsx';
import * as React from 'react';

/**
 * Props for the LongformContent component.
 *
 * @property children - JSX content to render when `renderMode` is "jsx"
 * @property renderMode - Controls whether to render JSX children or markdown string ("jsx" | "markdown")
 * @property markdownString - Markdown content to render when `renderMode` is "markdown"
 * @property optixFlowConfig - OptixFlow image optimization configuration for images in markdown
 * @property markdownStyles - Custom className mappings for markdown elements
 */
interface LongformContentProps {
    /**
     * JSX content to render when `renderMode` is "jsx".
     * Ignored when `renderMode` is "markdown".
     */
    children?: React.ReactNode;
    /**
     * Controls the rendering strategy for article content.
     * - "jsx": Renders the `children` prop as-is
     * - "markdown": Parses and renders the `markdownString` prop
     * @default "jsx"
     */
    renderMode?: "jsx" | "markdown";
    /**
     * Markdown string to parse and render when `renderMode` is "markdown".
     * Supports standard markdown syntax including headings, links, images, etc.
     */
    markdownString?: string;
    /**
     * OptixFlow configuration for optimizing images within markdown content.
     * Applied to all `<img>` tags when rendering markdown.
     */
    optixFlowConfig?: OptixFlowConfig;
    /**
     * Custom className mappings for markdown elements.
     * Allows styling individual markdown elements like headings, paragraphs, etc.
     * @example { h2: 'text-3xl font-bold', img: 'rounded-lg shadow-md' }
     */
    markdownStyles?: MarkdownStylesMap;
}
/**
 * A unified content rendering component for longform article content.
 *
 * Supports two rendering modes:
 * - **JSX mode** (default): Renders React children directly
 * - **Markdown mode**: Parses and renders markdown strings with automatic
 *   image optimization and link handling
 *
 * This component centralizes the markdown-to-JSX conversion logic with built-in
 * optimizations for images (via OptixFlow) and links (via Pressable).
 *
 * @example
 * ```tsx
 * // JSX mode (default)
 * <LongformContent>
 *   <p>Your JSX content here</p>
 * </LongformContent>
 *
 * // Markdown mode
 * <LongformContent
 *   renderMode="markdown"
 *   markdownString="# Hello World\n\nThis is **markdown** content."
 *   optixFlowConfig={{ quality: 80 }}
 * />
 * ```
 */
declare function LongformContent({ children, renderMode, markdownString, optixFlowConfig, markdownStyles, }: LongformContentProps): React.JSX.Element | null;

export { LongformContent, type LongformContentProps };
