import * as React from 'react';
import {ReactNode, SFC} from 'react';
import {Breadcrumb, BreadcrumbItem} from 'reactstrap';

export interface BreadcrumbsProps {
  list: (string | ReactNode)[];
}

export const Breadcrumbs: SFC<BreadcrumbsProps> = (props: BreadcrumbsProps) => (
  <div className="app-header-breadcrumbs">
    <Breadcrumb>
      {props.list.map((item, index) => (
        <BreadcrumbItem key={index}>
          {renderBreadcrumbContent(item)}
        </BreadcrumbItem>
      ))}
    </Breadcrumb>
  </div>
);

Breadcrumbs.displayName = 'Breadcrumbs';

const renderBreadcrumbContent = (item: string | ReactNode) => {
  if (typeof item === 'string') {
    return <span>{item}</span>;
  }

  return item;
};