import React, { MouseEventHandler, ReactElement, ReactNode, ElementType } from 'react';
import { PolymorphicComponent, ExpandProps, CommonProps, PolymorphicProps } from '@contentful/f36-core';
import { IconButtonProps } from '@contentful/f36-button';
import { HeadingElement } from '@contentful/f36-typography';

type BackButtonProps = Omit<Partial<IconButtonProps>, 'children' | 'icon' | 'variant' | 'size'> & {
    'aria-label'?: string;
};

type BreadcrumbProps = {
    breadcrumbs: Breadcrumb[];
};
type Breadcrumb = {
    content: string;
    url: string;
    onClick?: MouseEventHandler<HTMLAnchorElement>;
};
declare const Breadcrumb: {
    ({ breadcrumbs, ...otherProps }: BreadcrumbProps): React.JSX.Element;
    displayName: string;
};

declare const HEADER_DEFAULT_TAG = "header";
type Variant = {
    /**
     * An (optional) list of navigable links to prepend to the current title.
     */
    breadcrumbs?: BreadcrumbProps['breadcrumbs'];
    /**
     * Ensure that backbutton props can not be passed when `withBackButton` is false.
     * This is to prevent confusion, as the back button will not be rendered.
     */
    backButtonProps?: never;
    withBackButton?: false | never;
} | {
    /**
     * An (optional) list of navigable links to prepend to the current title.
     */
    breadcrumbs?: BreadcrumbProps['breadcrumbs'];
    /**
     * Props to spread on the back button. You almost certainly want to pass
     * an `onClick` handler.
     */
    backButtonProps?: BackButtonProps;
    /**
     * If `true`, renders a leading back button within the header.
     */
    withBackButton: true;
};
type HeaderInternalProps = CommonProps & Variant & {
    /**
     * Optional JSX children to display as complementary actions (e.g. buttons) related to the current page/route.
     */
    actions?: ReactElement | ReactElement[];
    /**
     * An (optional) element displayed in the center of the header, typically used to render refinement/search UI.
     */
    filters?: ReactElement;
    /**
     * The title of the element this header pertains to.
     */
    title?: ReactElement | string;
    titleProps?: {
        as?: HeadingElement;
        size?: 'medium' | 'large';
    };
    metadata?: ReactNode;
};
type HeaderProps<E extends ElementType = typeof HEADER_DEFAULT_TAG> = PolymorphicProps<HeaderInternalProps, E>;
declare const Header: PolymorphicComponent<ExpandProps<HeaderInternalProps>, typeof HEADER_DEFAULT_TAG>;

declare const HEADER_HEIGHT = 56;

export { HEADER_HEIGHT, Header, type HeaderProps };