import { Directive } from '@angular/core';
import { CdkOption } from '@angular/cdk/listbox';

/**
 * Directive for text-based list items within a uiList container
 * Applies text-specific styling and behavior for list items
 *
 * Usage:
 * ```html
 * <button uiTextListItem [value]="item" [disabled]="isItemDisabled">
 *   {{ item.label }}
 * </button>
 * ```
 */
@Directive({
  selector: '[uiListboxItem]',
  host: {
    class: 'ui-listbox-item',
  },
  hostDirectives: [
    {
      directive: CdkOption,
      inputs: ['cdkOption: value', 'cdkOptionDisabled: disabled'],
    },
  ],
})
export class ListboxItemDirective {}
