import React from 'react';
import PropTypes from 'prop-types';

/**
 * A stateless component which accepts json data and renders breadcrumbs.
 */
const Breadcrumb = props => (
    <ul className="jp-breadcrumbs">
        {
            props.currentPath.map((a, index) => (
                <li key={index}>
                    <a href={a.path || null} 
                        className={a.isActive ? 'jp-breadcrumb-active' : null}
                        aria-label={a.caption}
                        tabIndex="0">
                        {a.caption}
                    </a>
                </li>
            ))
        }
    </ul>
);


export default Breadcrumb;

Breadcrumb.propTypes = {
    /** An array of object having keys mentioned below */
    currentPath: PropTypes.arrayOf(
        PropTypes.shape({
            caption: PropTypes.string,
            path: PropTypes.string,
            isActive: PropTypes.bool
        })
    ).isRequired
};