import React from 'react';
import {withCloudContext} from '../Screens/Cloud/CloudContext';
import styles from './Breadcrumbs.module.scss';

const Breadcrumbs = ({currentPath, navigate}) => {
  const pathArr = currentPath.split('/').slice(1).filter(v => !!v);

  return (
    <div className="px-5 py-2">
      <span
        color="link"
        onClick={() => navigate('/')}
        className={`${styles.crumb} p-0`}>
        Начало {currentPath !== '/' && <>/ {' '}</>} 
      </span>
      {pathArr.map((path, i) => {
        const active = i === pathArr.length - 1
        return (
          <span
            color="link"
            onClick={() =>
              !active &&
              navigate('/' + pathArr.slice(0, i + 1).join('/'))
            }
            className={`${styles.crumb} ${active ? styles.active : ''} p-0`}
            key={pathArr.slice(0, i + 1).join('/')}>
            {path} {!active && <>/ {' '}</>} 
          </span>
        );
      })}
    </div>
  );
};

export default withCloudContext(Breadcrumbs);