import { Fragment, HTMLAttributes, ReactNode } from 'react';
import { cn } from '../lib/cn';

export interface BreadcrumbItem {
  label: ReactNode;
  href?: string;
  onClick?: () => void;
}

export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
  items: BreadcrumbItem[];
  separator?: ReactNode;
}

export function Breadcrumb({
  items,
  separator = '/',
  className,
  ...rest
}: BreadcrumbProps) {
  return (
    <nav
      aria-label="Breadcrumb"
      className={cn('flex items-center text-sm', className)}
      {...rest}
    >
      <ol className="flex items-center gap-2 flex-wrap">
        {items.map((item, idx) => {
          const isLast = idx === items.length - 1;
          return (
            <Fragment key={idx}>
              <li className="inline-flex items-center">
                {item.href && !isLast ? (
                  <a
                    href={item.href}
                    onClick={item.onClick}
                    className="text-text-2 hover:text-primary transition-colors"
                  >
                    {item.label}
                  </a>
                ) : isLast ? (
                  <span aria-current="page" className="text-text font-medium">
                    {item.label}
                  </span>
                ) : (
                  <button
                    type="button"
                    onClick={item.onClick}
                    className="text-text-2 hover:text-primary transition-colors"
                  >
                    {item.label}
                  </button>
                )}
              </li>
              {!isLast && (
                <li aria-hidden="true" className="text-text-3 select-none">
                  {separator}
                </li>
              )}
            </Fragment>
          );
        })}
      </ol>
    </nav>
  );
}