import React from 'react';
import { Icon } from 'UI';
import { Link } from 'react-router-dom';

interface Props {
  items: any;
}

function Breadcrumb(props: Props) {
  const { items } = props;
  return (
    <div className="mb-3 flex items-center text-lg">
      {items.map((item: any, index: any) => {
        if (index === items.length - 1) {
          return (
            <span key={index} className="color-gray-medium capitalize-first">
              {item.label}
            </span>
          );
        }
        if (item.to === undefined) {
          return (
            <div key={index} className="color-gray-darkest hover:text-teal group flex items-center">
              <span className="color-gray-medium capitalize-first">{item.label}</span>
              <span className="mx-2">/</span>
            </div>
          );
        }
        return (
          <div key={index} className="color-gray-darkest hover:text-teal group flex items-center">
            <Link to={item.to} className="flex items-center default-hover">
              {index === 0 && (
                <Icon name="chevron-left" size={16} className="mr-1 group-hover:fill-teal" />
              )}
              <span className="capitalize-first">{item.label}</span>
            </Link>
            <span className="mx-2">/</span>
          </div>
        );
      })}
    </div>
  );
}

export default Breadcrumb;