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, styled for the CIBG titlebar (`.titlebar .title`) —
    plain links with a chevron `::after` from the CIBG Icons font, current page as an
    unlinked, bold span. Domain-free — the caller supplies the trail. */
@Component({
  selector: 'app-breadcrumb',
  imports: [RouterLink],
  // CIBG's global "header nav" background rule matches ANY nav inside a <header>
  // — including this one, wherever it's mounted. Override it so the breadcrumb
  // never carries its own background (it should show whatever's behind it, e.g.
  // the titlebar's robijn fill).
  styles: [
    `
      nav {
        background: none;
      }
    `,
  ],
  template: `
    <nav i18n-aria-label="@@breadcrumb.aria" aria-label="Kruimelpad">
      <span class="visually-hidden" i18n="@@breadcrumb.hier">U bevindt zich hier:</span>
      @for (item of items(); track item.label; let last = $last) {
        @if (item.link && !last) {
          <a [routerLink]="item.link">{{ item.label }}</a>
        } @else {
          <span aria-current="page">{{ item.label }}</span>
        }
      }
    </nav>
  `,
})
export class BreadcrumbComponent {
  items = input.required<BreadcrumbItem[]>();
}
