import cx from "classnames";
import React from "react";

interface BreadcrumbItemProps {
  /** Additional CSS classes */
  className?: string;
  /** Current page item */
  isCurrent?: boolean;
  /** Item text */
  text: string;
  /** Item URL. Omit the URL for current item. */
  url?: string;
  /** Additional props */
  [key: string]: any;
}

const ITEM_CLASS_ROOT = "osk-breadcrumbs__item";
const LINK_CLASS_ROOT = "osk-breadcrumbs__link";

const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
  className,
  isCurrent,
  text,
  url,
  ...other
}) => {
  const itemClasses = cx(ITEM_CLASS_ROOT, className);

  // If current page, don't render as anchor even if URL is provided
  if (isCurrent) {
    return (
      <li
        className={itemClasses}
        {...(isCurrent ? { "aria-current": "page" } : {})}
        {...other}
      >
        {text}
      </li>
    );
  }

  // If URL provided and not current, render as anchor
  if (url) {
    return (
      <li className={itemClasses}>
        <a href={url} className={LINK_CLASS_ROOT} {...other}>
          {text}
        </a>
      </li>
    );
  }

  // No URL, no current status - just text
  return (
    <li className={itemClasses} {...other}>
      {text}
    </li>
  );
};

BreadcrumbItem.displayName = "BreadcrumbItem";

export { BreadcrumbItem };