import React,{ Component } from "react";
import { WordsBtn } from "educoder";

class CBreadcrumb extends Component{
  constructor(props){
    super(props);
    
  }
  
  render(){
    let { items, className, separator }=this.props;
    return(
      <p className={`clearfix mb10 ${className}`}>
        { items && items.map( (item, index) => {
          if (!item.name) {
            return ''
          }
          if (item.to) {
            return <React.Fragment>
              <WordsBtn style="grey" className="fl hovercolorblue" to={item.to}>{item.name}</WordsBtn>
              <span className="color-grey-9 fl ml3 mr3">{separator || '&gt;'}</span>
            </React.Fragment>
          } else {
            return <span>{item.name}</span>
          }
        })}
      </p>
    )
  }
}
export default CBreadcrumb;