import React, { ReactElement, ReactNode } from 'react';
import css from '../../utils/css';

import Breadcrumb from '../Breadcrumb';

import { CommonProps } from '../common';

import { PageHeaderWrapper, TitleWrapper } from './StyledPageHeader';

export interface PageHeaderProps extends CommonProps {
  /**
   * Breadcrumbs to display.
   */
  breadcrumbItems?: { href: string; text: string; withRouter?: boolean }[];
  /**
   * Title text.
   */
  title: ReactNode;
}

const PageHeader = ({
  breadcrumbItems,
  title,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: PageHeaderProps): ReactElement => {
  return (
    <PageHeaderWrapper
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      {breadcrumbItems !== undefined && <Breadcrumb items={breadcrumbItems} />}
      <TitleWrapper>{title}</TitleWrapper>
    </PageHeaderWrapper>
  );
};

export default PageHeader;