import {
  ChangeDetectionStrategy,
  Component,
  input,
  computed
} from '@angular/core';


export type TooltipVariant =
  | 'default'
  | 'info';

@Component({
  selector: 'app-tooltip',
  standalone: true,
  templateUrl: './tooltip.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Tooltip {
  readonly text = input.required<string>();

  readonly variant =
    input<TooltipVariant>('default');

  readonly resolvedTooltipClass = computed(() => {
    const baseClasses = [
      'pointer-events-none',
      'max-w-xs',
      'whitespace-normal',
      'rounded-sm',
      'px-2',
      'py-1',
      'text-xs',
      'font-medium',
      'leading-4'
    ];

    const variantClasses =
      this.variant() === 'info'
        ? [
          'border',
          'border-defaultborder',
          'bg-white',
          'text-defaulttextcolor',
          'shadow-lg',
          'dark:bg-bodybg'
        ]
        : [
          'bg-primary',
          'text-white',
          'shadow-sm'
        ];

    return [
      ...baseClasses,
      ...variantClasses
    ].join(' ');
  });
}