import React from 'react';
import './Breadcrumb.css';

export default function Breadcrumb({ items = [], onSelect }) {
  return (
    <div className="kole-breadcrumb">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span
            className={'kole-breadcrumb-item' + (i === items.length - 1 ? ' is-current' : '')}
            onClick={() => { if (i !== items.length - 1) onSelect && onSelect(it); }}
          >
            {it.label}
          </span>
          {i !== items.length - 1 ? <span className="kole-breadcrumb-sep">/</span> : null}
        </React.Fragment>
      ))}
    </div>
  );
}