import React, { SFC } from 'react';
import { Breadcrumb } from '@alifd/next';

export interface IPageHeaderProps {
  breadcrumbs?: { name: string; path?: string }[];
  title?: string;
  description?: string;
}

const PageHeader: SFC<IPageHeaderProps> = (props) => {
  const { breadcrumbs, title, description } = props;
  return (
    <div className="halo-page-header">
      {
        breadcrumbs && breadcrumbs.length > 0 ? (
          <Breadcrumb separator=" / ">
            {
              breadcrumbs.map((item, index) => (
                <Breadcrumb.Item key={index} link={item.path}>{item.name}</Breadcrumb.Item>
              ))
            }
          </Breadcrumb>
        ) : null
      }

      {
        title && (
          <span className="halo-page-header-title">{title}</span>
        )
      }

      {
        description && (
          <span className="halo-page-header-description">{description}</span>
        )
      }
    </div>
  );
};

export default PageHeader;