import { Link } from 'react-router-dom';
import './Breadcrumb.css';

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

interface BreadcrumbProps {
  items: BreadcrumbItem[];
  className?: string;
}

export function Breadcrumb({ items, className = '' }: BreadcrumbProps) {
  return (
    <nav className={`breadcrumb ${className}`.trim()} aria-label="Breadcrumb">
      <ol className="breadcrumb__list">
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <li key={index} className="breadcrumb__item">
              {!isLast && item.href ? (
                <>
                  <Link to={item.href} className="breadcrumb__link">
                    {item.label}
                  </Link>
                  <span className="breadcrumb__separator">/</span>
                </>
              ) : (
                <span className="breadcrumb__current">{item.label}</span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}