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

export interface BreadcrumbItem {
  label: string;
  url?: string;
  icon?: string;
}

@Component({
  selector: 'app-breadcrumbs',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <nav aria-label="Breadcrumb" class="mb-4">
      <ol
        class="flex flex-wrap items-center text-sm text-neutral-600"
        itemscope
        itemtype="https://schema.org/BreadcrumbList"
      >
        @for (item of breadcrumbs; track $index) {
        <li
          class="inline-flex items-center"
          itemprop="itemListElement"
          itemscope
          itemtype="https://schema.org/ListItem"
        >
          @if ($index > 0) {
          <span class="inline-flex items-center mx-2 text-neutral-400 select-none">
            <i class="fas fa-chevron-right text-xs"></i>
          </span>
          }

          @if (item.url && $index < breadcrumbs.length - 1) {
          <a
            [routerLink]="item.url"
            class="inline-flex items-center hover:text-blue-600 transition-colors"
            itemprop="item"
          >
            @if (item.icon) {
            <i [class]="item.icon + ' mr-1'"></i>
            }
            <span itemprop="name">{{ item.label }}</span>
          </a>
          } @else {
          <span
            class="inline-flex items-center font-semibold text-neutral-900"
            itemprop="item"
          >
            @if (item.icon) {
            <i [class]="item.icon + ' mr-1'"></i>
            }
            <span itemprop="name">{{ item.label }}</span>
          </span>
          }

          <meta itemprop="position" [content]="($index + 1).toString()" />
        </li>
        }
      </ol>
    </nav>
  `,
  styles: []
})
export class BreadcrumbsComponent {
  @Input() breadcrumbs: BreadcrumbItem[] = [];
}