import { Component, input } from '@angular/core';
import { RouterLink } from '@angular/router';

export interface BreadcrumbItem {
  label: string;
  link?: string; // omit on the current (last) page
}

/** Chrome: breadcrumb navigation. Renders the RHC/Utrecht breadcrumb pattern; the
    last item is the current page (no link, aria-current). Domain-free — the caller
    supplies the trail. */
@Component({
  selector: 'app-breadcrumb',
  imports: [RouterLink],
  styles: [`
    :host{display:block}
    .list{display:flex;flex-wrap:wrap;gap:var(--rhc-space-max-md);align-items:center;list-style:none;margin:0;padding:0;font-size:var(--rhc-text-font-size-sm)}
    .crumb{display:inline-flex;align-items:center;gap:var(--rhc-space-max-md)}
    a{color:var(--rhc-color-foreground-link);text-decoration:underline}
    a:hover{color:var(--rhc-color-foreground-link-hover)}
    .current{color:var(--rhc-color-foreground-subtle)}
    .sep{color:var(--rhc-color-foreground-subtle)}
    /* Inverse: on the blue header bar, everything is white. */
    :host(.inverse) a,
    :host(.inverse) .current,
    :host(.inverse) .sep { color: var(--rhc-color-foreground-on-primary); }
  `],
  template: `
    <nav i18n-aria-label="@@breadcrumb.aria" aria-label="Kruimelpad">
      <ol class="list">
        @for (item of items(); track item.label; let last = $last; let first = $first) {
          <li class="crumb">
            @if (!first) { <span class="sep" aria-hidden="true">›</span> }
            @if (item.link && !last) {
              <a [routerLink]="item.link">{{ item.label }}</a>
            } @else {
              <span class="current" aria-current="page">{{ item.label }}</span>
            }
          </li>
        }
      </ol>
    </nav>
  `,
})
export class BreadcrumbComponent {
  items = input.required<BreadcrumbItem[]>();
}
