import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideEllipsis } from '@ng-icons/lucide';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { hlm } from '@spartan-ng/helm/utils';
import type { ClassValue } from 'clsx';

@Component({
  selector: 'hlm-breadcrumb-ellipsis',
  imports: [NgIcon, HlmIcon],
  providers: [provideIcons({ lucideEllipsis })],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <span
      aria-hidden="true"
      role="presentation"
      [class]="_computedClass()"
      data-slot="breadcrumb-ellipsis"
    >
      <ng-icon
        name="lucideEllipsis"
        hlm
        size="sm"
      />
      <span class="sr-only">{{ srOnlyText() }}</span>
    </span>
  `,
})
export class HlmBreadcrumbEllipsis {
  public readonly userClass = input<ClassValue>('', { alias: 'class' });
  /** Screen reader only text for the ellipsis */
  public readonly srOnlyText = input<string>('More');

  protected readonly _computedClass = computed(() =>
    hlm(
      'size-5 [&>ng-icon]:text-[calc(var(--spacing)*4)] flex items-center justify-center',
      this.userClass(),
    ),
  );
}
