import { Link } from 'react-router-dom';
import React from 'react';

interface BreadcrumpsObject {
  name: string,
  address: string,
}
interface BreadcrumbsProps {
  currentPage: string,
  breadcrumbs: BreadcrumpsObject[]

}

const Breadcrumbs = ({ currentPage, breadcrumbs }: BreadcrumbsProps) => <ul className="c-breadcrumbs o-inline-list o-inline-list--full-height o-inline-list--aligned">

  {breadcrumbs.map((route, index) => <li key={index} className="c-breadcrumbs__item">
    <Link
      className="c-breadcrumbs__link"
      to={route.address}
    >
      {route.name}
    </Link>
    <span className='c-breadcrumbs__icon u-margin-left--small u-margin-right--small'>
      <i className="icon-flat-arrow-right" />
    </span>
  </li>)}

  <li className="c-breadcrumbs__item u-no-wrap">
    <span>
      {currentPage}
    </span>
  </li>
</ul>;

export default Breadcrumbs;