import { cn } from '../lib/utils';

export interface BreadcrumbItem {
  label: string;
  href?: string;
}

export interface BreadcrumbsProps {
  items: BreadcrumbItem[];
  className?: string;
  LinkComponent?: React.ComponentType<{ href: string; className?: string; children: React.ReactNode }>;
}

export function Breadcrumbs({ items, className, LinkComponent }: BreadcrumbsProps): JSX.Element {
  return (
    <nav aria-label="Breadcrumb" className={cn('flex', className)}>
      <ol className="flex items-center space-x-2 text-sm">
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <li key={index} className="flex items-center">
              {index > 0 && <span className="text-gray-400 mx-2">/</span>}
              {isLast ? (
                <span className="text-gray-900 font-medium" aria-current="page">
                  {item.label}
                </span>
              ) : item.href ? (
                LinkComponent ? (
                  <LinkComponent href={item.href} className="text-gray-600 hover:text-gray-900">
                    {item.label}
                  </LinkComponent>
                ) : (
                  <a href={item.href} className="text-gray-600 hover:text-gray-900">
                    {item.label}
                  </a>
                )
              ) : (
                <span className="text-gray-600">{item.label}</span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

