import * as React from 'react';
import styles from './PageChrome.module.scss';
import { Icon, IconName } from './Icon';

export interface IBreadcrumbItem {
  label: string;
  onClick?: () => void;
}

export const Breadcrumbs: React.FC<{ items: IBreadcrumbItem[] }> = ({ items }) => (
  <div className={styles.bread}>
    {items.map((item, i) => (
      <React.Fragment key={i}>
        {i > 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>
);

export interface IPageHeaderProps {
  icon: IconName;
  subtitle: string;
  title: string;
  actions?: React.ReactNode;
}

export const PageHeader: React.FC<IPageHeaderProps> = ({ icon, subtitle, title, actions }) => (
  <div className={styles.ph}>
    <div className={styles.phLeft}>
      <div className={styles.phIcon}><Icon name={icon} /></div>
      <div>
        <div className={styles.phSub}>{subtitle}</div>
        <div className={styles.phTitle}>{title}</div>
      </div>
    </div>
    {actions && <div className={styles.phRight}>{actions}</div>}
  </div>
);