import cx from "classnames";

import { BreadcrumbItem } from "./BreadcrumbItem";

interface BreadcrumbItemData {
  /** Item text */
  text: string;
  /** Item URL. Omit the URL for current item. */
  url?: string;
}

interface BreadcrumbsProps {
  /** Additional CSS classes */
  className?: string;
  /** Breadcrumb items */
  items: BreadcrumbItemData[];
  /** Navigation label */
  label?: string;
  /** Additional props */
  [key: string]: any;
}

const CLASS_ROOT = "osk-breadcrumbs";

const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
  className,
  label,
  items,
  ...other
}) => {
  const classes = cx(CLASS_ROOT, className);

  // Mark the last item as current
  const lastIndex = items.length - 1;

  return (
    <nav aria-label={label} className={classes} {...other}>
      <ol className={`${CLASS_ROOT}__container`}>
        {items.map((item, index) => (
          <BreadcrumbItem
            {...item}
            key={item.text}
            isCurrent={index === lastIndex}
          />
        ))}
      </ol>
    </nav>
  );
};

Breadcrumbs.displayName = "Breadcrumbs";

export { Breadcrumbs };