import { Link } from 'react-router-dom';

export interface Crumb {
  label: string;
  /** Where the crumb links; omit for the current (last) crumb. */
  to?: string;
}

/**
 * A breadcrumb navigation trail. The last crumb is the current page and is
 * rendered as plain text; earlier crumbs link to their routes.
 */
export default function Breadcrumbs({ crumbs }: { crumbs: Crumb[] }) {
  return (
    <nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1 text-sm text-zinc-400">
      {crumbs.map((crumb, i) => {
        const last = i === crumbs.length - 1;
        return (
          <span key={i} className="flex items-center gap-1">
            {i > 0 && <span className="text-zinc-600">/</span>}
            {crumb.to && !last ? (
              <Link to={crumb.to} className="hover:text-zinc-100">
                {crumb.label}
              </Link>
            ) : (
              <span className={last ? 'text-zinc-100' : ''}>{crumb.label}</span>
            )}
          </span>
        );
      })}
    </nav>
  );
}