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

export interface NavItem {
  readonly label: string;
  readonly to: string;
}

/** Organism: vertical side navigation for the "Mijn omgeving" portal. The active
    route is marked with `routerLinkActive`. Domain-free — the caller supplies the
    items (English-named shared chrome). */
@Component({
  selector: 'app-side-nav',
  imports: [RouterLink, RouterLinkActive],
  styles: [`
    :host{display:block}
    .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-xs)}
    .item{
      display:block;
      padding:var(--rhc-space-max-md) var(--rhc-space-max-lg);
      color:var(--rhc-color-foreground-default);
      text-decoration:none;
      border-radius:var(--rhc-border-radius-sm);
      border-inline-start:var(--rhc-border-width-md) solid transparent;
    }
    .item:hover{background:var(--rhc-color-cool-grey-100)}
    .item.active{
      background:var(--rhc-color-lintblauw-100);
      border-inline-start-color:var(--rhc-color-lintblauw-700);
      color:var(--rhc-color-lintblauw-700);
      font-weight:var(--rhc-text-font-weight-semi-bold);
    }
  `],
  template: `
    <nav [attr.aria-label]="ariaLabel()">
      <ul class="list">
        @for (item of items(); track item.to) {
          <li>
            <a class="item" [routerLink]="item.to" routerLinkActive="active"
               [routerLinkActiveOptions]="{ exact: true }">{{ item.label }}</a>
          </li>
        }
      </ul>
    </nav>
  `,
})
export class SideNavComponent {
  items = input.required<NavItem[]>();
  ariaLabel = input($localize`:@@sideNav.aria:Mijn omgeving`);
}
