import * as React from 'react';
import { FastBreadcrumb } from 'components/ui';
import useCrumb from './useCrumb';
import { CrumbTypes } from './types';

function Crumb(props: CrumbTypes.CrumbProps) {
  const { paths } = useCrumb(props);

  return (
    <FastBreadcrumb>
      {paths.map((
        item: CrumbTypes.CrumbPath,
      ) => {
        if (item.goto) {
          return (
            <FastBreadcrumb.Item
              key={item.name}
              href={item.goto}
            >
              {item.name}
            </FastBreadcrumb.Item>
          );
        }
        return (
          <FastBreadcrumb.Item key={item.name}>
            {item.name}
          </FastBreadcrumb.Item>
        );
      })}
    </FastBreadcrumb>
  );
}

export default Crumb;