import React from 'react';
import { Breadcrumb as BBreadcrumb, BreadcrumbProps as BootstrapBreadcrumbProps } from 'react-bootstrap';
import "./Breadcrumb.scss"

export type Crumb = {title: React.ReactNode; href?: string;};

interface BreadcrumbProps extends Omit<BootstrapBreadcrumbProps, 'onClick'> {
  onClick?: (item: Crumb, e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  data: Crumb[];
}

const Breadcrumb = ({ data, onClick, ...props }: BreadcrumbProps) => {
  const size = data.length - 1;
  const handleOnClick = (item: Crumb) => (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
    onClick && onClick(item, e);
  }

  return (
    <BBreadcrumb {...props}>
      {
        data.map((item, index) => (
          item.href ? (
            <BBreadcrumb.Item
              key={`id-${index}`}
              active={index === size}
              href={item.href}
              onClick={handleOnClick(item)}
            >
              {item.title}
            </BBreadcrumb.Item>
          ) : (
            <li
              key={`id-${index}`}
              onClick={handleOnClick(item)}
              className={`breadcrumb-item ${index === size ? 'active' : ''}`}
            >
              {item.title}
            </li>
          )
        ))
      }
    </BBreadcrumb>
  );
};

export default Breadcrumb;
export { Breadcrumb, BreadcrumbProps };