import * as React from 'react'
import classNames from 'classnames'

type Breadcrumb = {
  active?: boolean
  empty?: boolean
  label?: string
  link?: string
}

const Breadcrumb: React.StatelessComponent<Breadcrumb> = ({
  active = false,
  empty = false,
  label,
  link,
}) => {
  const crumbClasses = classNames(
    'ui-breadcrumbs-small__crumb',
    'ui-text--md',
    { 'ui-breadcrumbs-small__crumb--active': active }
  )
  return empty ? (
    <li className={crumbClasses}>&nbsp;</li>
  ) : (
    <li className={crumbClasses}>
      {link ? (
        <a href={link} className="ui-link ui-link--inherit-color">
          {label}
        </a>
      ) : (
        <span>{label}</span>
      )}
    </li>
  )
}

type BreadcrumbsSmall = {
  crumbs: Breadcrumb[]
  className?: string
  style?: object
}

const BreadcrumbsSmall: React.StatelessComponent<BreadcrumbsSmall> = ({
  crumbs,
  className,
  style,
}) => {
  const inputLabelClass = classNames('ui-breadcrumbs-small', 'ui-list--plain', {
    [className as string]: !!className,
  })
  return (
    <ul className={inputLabelClass} style={style}>
      {crumbs.map(({ active, empty, label, link }, index) => (
        <Breadcrumb
          active={active}
          empty={empty}
          label={label}
          link={link}
          key={index}
        />
      ))}
    </ul>
  )
}

export default BreadcrumbsSmall