import { type ReactNode } from 'react';
import { type IconButtonProps } from '../IconButton';
import { type ResponsiveSlot } from '../types/responsive';
export type PageHeaderRenderOptions = {
    /**
     * The original heading element wrapped in <h1> tag.
     * This ensures proper semantic HTML structure and accessibility.
     */
    headingNode: ReactNode;
};
export type PageHeaderProps = {
    /**
     * It's for rendering the content of the heading.
     * It should be just a string in most cases.
     * Note that it can be any element, but it should be allowed in the <h1> element.
     */
    headingSlot?: ReactNode;
    /**
     * Custom render function for the heading area.
     * Provides the original headingNode wrapped in <h1> tag for flexible layout composition.
     * When provided, this takes precedence over the default headingSlot rendering.
     *
     * @param options - Contains the headingNode for layout composition
     *
     * @returns ReactNode - Custom layout containing the headingNode
     *
     * @example
     * ```tsx
     * <PageHeader
     *   headingSlot="Dashboard"
     *   renderHeading={({ headingNode }) => (
     *     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
     *       {headingNode}
     *       <Badge>Live</Badge>
     *     </div>
     *   )}
     * />
     * ```
     */
    renderHeading?: (options: PageHeaderRenderOptions) => ReactNode;
    /**
     * It's for rendering the back button on the left side of the component.
     */
    showBackButton?: boolean;
    /**
     * It's for controlling the back button.
     */
    backButtonProps?: Omit<IconButtonProps, 'outlined' | 'children'>;
    /**
     * It's for rendering any interactions on the right side of the component.
     */
    actionSlot?: ResponsiveSlot | ReactNode;
    /**
     * It's for overriding the root styles of the component.
     */
    className?: string;
};