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,
}) => {
  return empty ? (
    <li className="ui-breadcrumbs-large__crumb">&nbsp;</li>
  ) : (
    <li
      className={classNames('ui-breadcrumbs-large__crumb', {
        'ui-breadcrumbs-large__crumb--active': active,
      })}
    >
      {link ? (
        <a href={link} className="ui-link">
          <div className="ui-text__h3 ui-breadcrumbs-mb">{label}</div>
        </a>
      ) : (
        <div className="ui-text__h3 ui-breadcrumbs-mb">{label}</div>
      )}
    </li>
  )
}

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

const BreadcrumbsLarge: React.StatelessComponent<BreadcrumbsLarge> = ({
  crumbs,
  className,
  style,
}) => {
  const inputLabelClass = classNames({
    'ui-breadcrumbs-large': true,
    [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 BreadcrumbsLarge