import * as React from 'react';
import styles from './PageChrome.module.scss';

export interface IBreadcrumbItem {
  label: string;
  /** Без onClick пункт неинтерактивен — это текущая страница. */
  onClick?: () => void;
}

export interface IBreadcrumbsProps {
  items: IBreadcrumbItem[];
}

export const Breadcrumbs: React.FC<IBreadcrumbsProps> = ({ items }) => (
  <div className={styles.bread}>
    {items.map((item, index) => (
      <React.Fragment key={item.label}>
        {index > 0 && <span className={styles.sep}>&#9670;</span>}
        {item.onClick ? (
          <button className={styles.breadLink} onClick={item.onClick}>{item.label}</button>
        ) : (
          <span>{item.label}</span>
        )}
      </React.Fragment>
    ))}
  </div>
);