import { h, Component } from 'preact';

class WBBreadcrumbs extends Component {
  render({ items, onItemClicked, getItemUrl }) {
    return (
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          { items.map((item, idx) => (
            <li class={ 'breadcrumb-item' +
              (idx == items.length - 1 ? ' active' : '') }>
              {
                (idx < items.length - 1) ? (
                  <a href={ getItemUrl ? getItemUrl(item) : '#' }
                    onclick={ onItemClicked ? ( e => { e.preventDefault();
                    onItemClicked(item); } ) : null }>
                    { typeof(item) === 'string' ? item : item['name'] }
                  </a>
                ) : (
                  typeof(item) === 'string' ? item : item['name']
                )
              }
            </li>
          )) }
        </ol>
      </nav>
    );
  }
}

WBBreadcrumbs.defaultProps = {
  onItemClicked: null,
  getItemUrl: null
}

export default WBBreadcrumbs;