import { CSSObject, FlattenSimpleInterpolation } from 'styled-components';
import { ComponentProps, ReactNode } from 'react';
import { IconChevronLeft } from '../../icons';
import { TypographyWithAutoTooltipProps } from '../Typography';
import { IconButton } from '../IconButton';
import { BreadcrumbsPropsComp } from '../Breadcrumbs';

export type PageTitleSlotSizesProps = {
    buttonSize: 's' | 'xs';
};
export type PageTitleAdaptiveSlot = ReactNode | ((props: PageTitleSlotSizesProps) => ReactNode);
export type PageTitleProps = {
    title?: string;
    titleTypographyProps?: Omit<TypographyWithAutoTooltipProps<'H2'>, 'children' | 'variant'>;
    subtitle?: string;
    subtitleTypographyProps?: Omit<TypographyWithAutoTooltipProps<'BodyS'>, 'children' | 'variant'>;
    titleSlot?: PageTitleAdaptiveSlot;
    rightSlot?: PageTitleAdaptiveSlot;
    disableMediaAdaptive?: boolean;
    breadcrumbs?: BreadcrumbsPropsComp;
    showBackButton?: boolean;
    onBackClick?: () => void;
    $css?: string | CSSObject | FlattenSimpleInterpolation;
    className?: string;
};
export type PageTitleIconButtonProps = ComponentProps<typeof IconButton> & {
    iconSize?: ComponentProps<typeof IconChevronLeft>['size'];
};