import { BadgeProps, Breadcrumbs } from '@wix/design-system';
import { ReactElement } from 'react';
import { MoreActionsElement } from '../MoreActions';
import { PageSubTitleProps } from '../PageSubTitle';
import { useFormPageHeader } from '../../state/FormPage';

export interface FormPageHeaderProps {
  /**
   * <MoreActions />
   */
  moreActions?: MoreActionsElement;
  /**
   * Page breadcrumbs
   */
  breadcrumbs?: ReactElement<Breadcrumbs>;
  /**
   * Page title text and optional badges
   */
  title: {
    text: string;
    badges?: (Pick<BadgeProps, 'skin' | 'prefixIcon' | 'suffixIcon'> & {
      text: string;
    })[];
  };
  /**
   * Page subtitle text
   */
  subtitle?: PageSubTitleProps;
}

export type FormPageHeaderElement = ReactElement<
  FormPageHeaderProps,
  typeof FormPageHeader
>;

export function FormPageHeader(_props: FormPageHeaderProps) {
  return null;
}

FormPageHeader.useFormPageHeader = useFormPageHeader;
FormPageHeader.displayName = 'FormPageHeader';