import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { RouterModule } from '@angular/router';

export interface PageBreadcrumbItem {
  label: string;
  link?: string | any[];
}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-page-breadcrumb',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <nav class="page-breadcrumb" aria-label="面包屑">
      @for (item of items; track $index; let last = $last) {
        @if (!last && item.link) {
          <a class="crumb-link" [routerLink]="item.link" queryParamsHandling="preserve">{{ item.label }}</a>
        } @else if (!last) {
          <span class="crumb-text">{{ item.label }}</span>
        } @else {
          <span class="crumb-current">{{ item.label }}</span>
        }
        @if (!last) {
          <span class="crumb-sep" aria-hidden="true">/</span>
        }
      }
    </nav>
  `,
  styleUrls: ['./page-breadcrumb.component.scss'],
})
export class PageBreadcrumbComponent {
  @Input() items: PageBreadcrumbItem[] = [];
}