import Link from 'next/link';
import {
  arrayOf,
  bool,
  element,
  string
} from 'prop-types';

export const Crumb = ({ title, href, last }) => {
  let content = null;

  if (last) {
    content = (
      <span>
        { title }
      </span>
    );
  } else {
    content = (
      <Link href={ href }>
        <a title={ title }>
          { title }
        </a>
      </Link>
    );
  }

  return (
    <div className="crumb">
      { content }
      {
        !last && <span className="separator">{ `<` }</span>
      }

      <style jsx global>{`
        .crumb {
          display: inline-block;
        }
        .crumb span,
        .crumb a {
          color: #9f9f9f;
          font-size: 14px;
          text-decoration: none;
        }

        .crumb a:hover {
          color: #9f9f9f;
        }

        .separator {
          margin: 0 10px;
        }
      `}</style>
    </div>
  )
};

Crumb.propTypes = {
  title: string.isRequired,
  href: string.isRequired,
  last: bool
};

Crumb.defaultProps = {
  last: false
};

export const Breadcrumbs = ({ children }) => (
  <div className="breadcrumbs">
    { children }
  </div>
);

Breadcrumbs.propTypes = {
  children: arrayOf(element)
};