import { Component, input, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MenusModule } from '@progress/kendo-angular-menu';
import { ICON_SETTINGS, SVGIcon } from '@progress/kendo-angular-icons';

@Component({
  selector: 'mnp-menu-item',
  standalone: true,
  imports: [CommonModule, MenusModule],
  providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font', size: 'medium' } }],
  template: `
     <link
      rel="stylesheet"
      href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css"
    />

    <kendo-menu [items]="items"
    >
      <ng-template kendoMenuItemTemplate let-item="item" >
        <span  class='item'>
        <span class="icon-container">
          <ng-container *ngIf="item.icon; else noIcon">
            <span [ngClass]="item.icon" class="k-icon"></span>
          </ng-container>
          <ng-template #noIcon>
            <span class="k-icon empty-icon"></span>
          </ng-template>
        </span>
        {{ item.text }}
        </span>
      </ng-template>
    </kendo-menu>
  `,
    styleUrl: './menu-item.component.scss',
    

})
export class MenuItemComponent {
  @Input() items: MenuItem[] = [];
  @Input() vertical: boolean = false;

}

interface MenuItem {
  text?: string;
  url?: string;
  icon?: string;  // Dynamic icon field
  disabled?: boolean;
  separator?: boolean;
  svgIcon?: SVGIcon;
  cssClass?: string;
  items?: MenuItem[];
}