import type { ReactNode } from 'react';
import { Link } from 'react-router';

import { getRoleSectionTrail, getUserSectionTrail } from '@/navigation/breadcrumbs';
import { getBreadcrumbs, NAV_MODULES } from '@/navigation/nav-config';

export interface PageBreadcrumbsProps {
  pathname: string;
}

export function PageBreadcrumbs({ pathname }: PageBreadcrumbsProps): ReactNode {
  const entries =
    getUserSectionTrail(pathname) ??
    getRoleSectionTrail(pathname) ??
    getBreadcrumbs(NAV_MODULES, pathname);
  return (
    <nav className="lx-breadcrumbs" aria-label="面包屑">
      {entries.map((entry, index) => {
        const isLast = index === entries.length - 1;
        return (
          <span key={entry.key} className="lx-breadcrumbs__entry">
            {index > 0 ? <span className="lx-breadcrumbs__sep">/</span> : null}
            {entry.path !== undefined && !isLast ? (
              <Link to={entry.path} className="lx-breadcrumbs__link">
                {entry.label}
              </Link>
            ) : (
              <span className={isLast ? 'lx-breadcrumbs__current' : 'lx-breadcrumbs__label'}>
                {entry.label}
              </span>
            )}
          </span>
        );
      })}
    </nav>
  );
}