import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideLifeBuoy, lucideSend } from '@ng-icons/lucide';
import { HlmSidebarImports } from '@spartan-ng/helm/sidebar';

import type { NavItem } from './types';

@Component({
  selector: 'app-nav-secondary',
  imports: [HlmSidebarImports, NgIcon, RouterLink],
  providers: [provideIcons({ lucideLifeBuoy, lucideSend })],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <hlm-sidebar-group>
      <div hlmSidebarGroupContent>
        <ul hlmSidebarMenu>
          @for (item of items(); track item.title) {
            <li hlmSidebarMenuItem>
              <a
                [routerLink]="item.url"
                hlmSidebarMenuButton
                closeMobileSidebarOnClick
                size="sm"
              >
                <ng-icon [name]="item.icon" />
                {{ item.title }}
              </a>
            </li>
          }
        </ul>
      </div>
    </hlm-sidebar-group>
  `,
})
export class NavSecondary {
  readonly items = input.required<NavItem[]>();
}
