import { MarkdownToJSX } from 'markdown-to-jsx';
import { ElementType, ReactNode } from 'react';

/**
 * Override map for custom component rendering
 */
type OverrideMap = Record<string, ElementType>;
/**
 * Map of element names to custom className strings
 * Supports all HTML elements (h1-h6, p, img, iframe, etc.)
 *
 * @example
 * ```tsx
 * markdownStyles={{
 *   h2: 'text-2xl md:text-4xl text-primary',
 *   img: 'shadow-lg rounded-2xl',
 *   iframe: 'aspect-video w-full rounded-2xl shadow-lg my-12'
 * }}
 * ```
 */
type MarkdownStylesMap = Record<string, string>;
/**
 * OptixFlow configuration for image optimization
 * Passed through to @page-speed/img component
 */
interface OptixFlowConfig {
    quality?: number;
    format?: string;
    sizes?: {
        sm?: number;
        md?: number;
        lg?: number;
        full?: number;
    };
    [key: string]: any;
}
/**
 * Configuration options for markdown rendering
 */
interface MarkdownOptions extends Omit<MarkdownToJSX.Options, "overrides" | "wrapper"> {
    /**
     * Custom component overrides
     */
    overrides?: OverrideMap;
    /**
     * Custom className mappings for markdown elements
     * Simplifies styling without creating custom components
     *
     * @example
     * ```tsx
     * markdownStyles={{
     *   h2: 'text-3xl font-bold',
     *   img: 'rounded-lg shadow-md',
     *   iframe: 'aspect-video w-full'
     * }}
     * ```
     */
    markdownStyles?: MarkdownStylesMap;
    /**
     * OptixFlow image optimization configuration
     * Automatically passed to @page-speed/img component when used as override
     *
     * @example
     * ```tsx
     * <Markdown
     *   optixFlowConfig={{ quality: 85, format: 'webp' }}
     *   overrides={{ img: Img }}
     * >
     *   ![Image](url)
     * </Markdown>
     * ```
     */
    optixFlowConfig?: OptixFlowConfig;
    /**
     * Whether to use default ecosystem overrides
     * @default true
     */
    useDefaults?: boolean;
    /**
     * Enable sanitization of dangerous HTML
     * @default true
     */
    sanitize?: boolean;
    /**
     * Custom className for the wrapper element
     */
    className?: string;
    /**
     * Custom wrapper component (defaults to 'div')
     */
    wrapper?: ElementType | null;
    /**
     * Apply width-containment styles to the wrapper element.
     *
     * When enabled (the default) the wrapper receives `min-width: 0`,
     * `max-width: 100%`, `overflow-wrap: break-word` and `overflow-x: clip` as
     * **inline** styles. Together with the per-element guards on tables, `<pre>`,
     * images and iframes, this makes it impossible for one wide descendant to
     * stretch an ancestor grid/flex column and push the entire page past a phone
     * viewport.
     *
     * Only set this to `false` if the surrounding layout deliberately allows
     * markdown content to bleed outside its column.
     *
     * Has no effect when `wrapper` is `null` (there is no wrapper box to style).
     *
     * @default true
     */
    widthGuard?: boolean;
}
/**
 * Props for the Markdown component
 */
interface MarkdownProps extends MarkdownOptions {
    /**
     * Markdown content to render
     */
    children: string;
}
/**
 * Result from useMarkdown hook
 */
interface UseMarkdownResult {
    /**
     * Compiled JSX output
     */
    content: ReactNode;
    /**
     * Whether compilation is in progress
     */
    isCompiling: boolean;
    /**
     * Compilation error, if any
     */
    error?: Error;
}

export type { MarkdownOptions as M, OverrideMap as O, UseMarkdownResult as U, MarkdownProps as a, MarkdownStylesMap as b, OptixFlowConfig as c };