export function MobileHeader()

in src/mobile-header/mobile-header.tsx [68:140]
69 lines of code
9 McCabe index (conditional complexity)

export function MobileHeader({
  overrides = {},
  title,
  navButton,
  actionButtons = [],
  type = TYPE.fixed,
  expanded = false,
}: MobileHeaderProps) {
  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
  const [Title, titleProps] = getOverrides(overrides.Title, StyledTitle);
  const [NavContainer, navContainerProps] = getOverrides(
    overrides.NavContainer,
    StyledNavContainer
  );
  const [HeaderButton, iconButtonProps] = getOverrides(overrides.HeaderButton, DefaultHeaderButton);
  const [ActionButtonsContainer, actionButtonsContainerProps] = getOverrides(
    overrides.ActionButtonsContainer,
    StyledActionButtonsContainer
  );

  if (actionButtons.length > 2 && __DEV__) {
    console.warn(
      `MobileHeader can only render two additional buttons. Received ${actionButtons.length}`
    );
  }

  return (
    <Root {...rootProps} $type={type} $expanded={expanded}>
      <NavContainer
        $type={type}
        $hasTextContent={navButton && !Boolean(navButton.renderIcon)}
        {...navContainerProps}
      >
        {navButton && (
          <HeaderButton
            onClick={navButton.onClick}
            type={type}
            aria-label={navButton.label}
            {...iconButtonProps}
          >
            {renderButtonContent(navButton.renderIcon || navButton.label)}
          </HeaderButton>
        )}
      </NavContainer>

      {type === TYPE.fixed && (
        <Title $type={type} $expanded={expanded} {...titleProps}>
          {title}
        </Title>
      )}

      {actionButtons.length > 0 && (
        <ActionButtonsContainer {...actionButtonsContainerProps}>
          {actionButtons.map((button, idx) => {
            // @ts-expect-error todo(ts-migration) TS2339 Property 'renderIcon' does not exist on type 'IconButton | undefined'.
            const { renderIcon, onClick, label } = button;
            return (
              <HeaderButton
                onClick={onClick}
                aria-label={label}
                type={type}
                {...iconButtonProps}
                key={idx}
              >
                {renderButtonContent(renderIcon || label)}
              </HeaderButton>
            );
          })}
        </ActionButtonsContainer>
      )}
    </Root>
  );
}