import { Link, useMatches } from '@remix-run/react';

interface BreadcrumbItem {
  title: string;
  to?: string;
}

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

interface Handle {
  breadcrumb: string | ((data: any) => string);
}

interface Match {
  handle?: Handle;
  pathname: string;
  data: any;
}

export function Breadcrumb({ items = [], className = '' }: BreadcrumbProps) {
  const matches = useMatches() as Match[];
  const breadcrumbs = items.length > 0 ? items : matches
    .filter(match => match.handle?.breadcrumb)
    .map(match => ({
      title: typeof match.handle?.breadcrumb === 'function' 
        ? match.handle.breadcrumb(match.data)
        : match.handle?.breadcrumb,
      to: match.pathname
    }));

  if (breadcrumbs.length === 0) {
    return null;
  }

  return (
    <nav className={`mb-4 ${className}`} aria-label="面包屑导航">
      <ol className="flex items-center space-x-2 text-sm text-gray-500">
        <li>
          <Link to="/" className="hover:text-primary-600 flex items-center">
            <i className="ri-home-line mr-1" />
            首页
          </Link>
        </li>
        
        {breadcrumbs.map((item, index) => (
          <li key={index} className="flex items-center">
            <i className="ri-arrow-right-s-line mx-1 text-gray-400" />
            {index === breadcrumbs.length - 1 ? (
              <span className="text-gray-900 font-medium">{item.title}</span>
            ) : (
              <Link 
                to={item.to || '#'} 
                className="hover:text-primary-600"
              >
                {item.title}
              </Link>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}