import React from 'react';

export type BreadcrumbItem = {
  label?: string;
  href?: string;
  onClick?: (e: React.MouseEvent) => void;
  icon?: React.ReactNode;
  isCurrent?: boolean;
};

export type BreadcrumbsProps = {
  items: BreadcrumbItem[];
  noHeader?: boolean;
};

const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, noHeader = false }) => {
  const lastIndex = items.length - 1;

  return (
    <nav className={`breadcrumb${noHeader ? ' breadcrumb--no-header' : ''}`} aria-label="Breadcrumb">
      <div className="breadcrumb__container">
        <ol className="breadcrumb__list">
          {items.map((item, idx) => {
            const isCurrent = item.isCurrent ?? idx === lastIndex;

            const content = (
              <span className="breadcrumb__content">
                {item.icon && (
                  <span className="breadcrumb__icon" aria-hidden="true">
                    {item.icon}
                  </span>
                )}
                {item.label && (
                  <span className="breadcrumb__label" title={item.label}>
                    {item.label}
                  </span>
                )}
              </span>
            );

            return (
              <li key={idx} className="breadcrumb__item">
                {idx > 0 && (
                  <span className="breadcrumb__separator" aria-hidden="true">
                    /
                  </span>
                )}

                {isCurrent || !item.href ? (
                  <span className="breadcrumb__current" aria-current={isCurrent ? 'page' : undefined}>
                    {content}
                  </span>
                ) : (
                  <a className="breadcrumb__link" href={item.href} onClick={item.onClick}>
                    {content}
                  </a>
                )}
              </li>
            );
          })}
        </ol>
      </div>
    </nav>
  );
};

export default Breadcrumbs;