import React from 'react';
import { Link } from '@tanstack/react-router';

export type BreadcrumbItem = {
  label: string;
  to?: string;
};

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export default function Breadcrumb({ items }: BreadcrumbProps) {
  return (
    <nav aria-label="Breadcrumb" className="flex items-center space-x-2 text-sm text-gray-500">
      {items.map((item, index) => {
        const isLast = index === items.length - 1;

        return (
          <React.Fragment key={item.label}>
            {item.to && !isLast ? (
              <Link
                to={item.to}
                className="hover:text-gray-900 transition-colors"
              >
                {item.label}
              </Link>
            ) : (
              <span className="text-gray-900 font-medium">{item.label}</span>
            )}
            
            {!isLast && (
              <span className="text-gray-400" aria-hidden="true">
                &gt;
              </span>
            )}
          </React.Fragment>
        );
      })}
    </nav>
  );
}