import React, {CSSProperties} from 'react';
import cls from 'classnames';
import cn from './breadcrumb.module.styl';

export interface BreadcrumbProps {
    layers: string[];
    className?: string;
    style?: CSSProperties;
}

export const Breadcrumb = (props: BreadcrumbProps) => {
    const {layers, className, style} = props;

    return (
        <span className={cls(cn.breadcrumb, className)} style={style}>
            {layers.map((val, idx) => {
                if (idx < layers.length - 1) {
                    return (
                        <span key={idx}>
                            {val}
                            <i className={cn.slash}>/</i>
                        </span>
                    );
                }

                return <span key={idx}>{val}</span>;
            })}
        </span>
    );
};