text: // @flow
  import * as React from 'react';
  import styled from 'styled-components';
  
  type Props = {|
    crumbs: Array<Object>,
    onClick: (index: number) => any,
  |};
  
  const StyledBreadcrumb: React.ComponentType<{}> = styled.ul`
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-font);
    grid-area: breadcrumbs;
    display: flex;
    align-items: center;
    justify-content: center;
  
    a,
    a::before,
    li > ::before {
      color: var(--color-font);
    }
  
    li {
      display: flex;
      flex-direction: row;
  
      a {
        cursor: pointer;
      }
  
      &::before {
        margin: 0 var(--padding-xs);
        content: '/';
      }
  
      &:first-child::before {
        content: '';
      }
    }
  `;
  
  class Breadcrumb extends React.PureComponent<Props> {
    _handleClick(index: number, e: SyntheticEvent<HTMLAnchorElement>) {
      e.preventDefault();
      const { onClick } = this.props;
      if (typeof onClick === 'function') {
        onClick(index);
      }
    }
  
    render() {
      const { crumbs, onClick } = this.props;
      return (
        <StyledBreadcrumb>
          {crumbs.map((crumb, i, arr) => {
            if (arr.length - 1 === i) {
              return <li key={crumb}>{crumb}</li>;
            } else {
              return (
                <li key={crumb}>
                  <a href="#" onClick={onClick}>
                    {crumb}
                  </a>
                </li>
              );
            }
          })}
        </StyledBreadcrumb>
      );
    }
  }
  
  export default Breadcrumb;
  