import { Component, Input } from '@angular/core'
/**
 * Represents a tooltip component for displaying informative messages.
 * 
 * Look the link about the component in original framework and the appearance
 *
 * @see {@link https://css.squidit.com.br/components/tooltip}
 * 
 * @example
 * <sq-tooltip placement='center top' message='This is a tooltip message.'></sq-tooltip>
 *
 */
@Component({
  selector: 'sq-tooltip',
  templateUrl: './sq-tooltip.component.html',
  styleUrls: ['./sq-tooltip.component.scss'],
})
export class SqTooltipComponent {
  /**
   * The background color of the tooltip.
   */
  @Input() color = ''

  /**
   * The name of the icon to display in the tooltip.
   */
  @Input() icon = ''

  /**
   * The placement of the tooltip (e.g., 'center top').
   * @see {@link https://css.squidit.com.br/components/tooltip}
   */
  @Input() placement = 'center top'

  /**
   * The message to display in the tooltip.
   */
  @Input() message = ''

  /**
   * Additional CSS classes for styling the tooltip.
   */
  @Input() tooltipClass = ''

  /**
   * The text alignment within the tooltip.
   */
  @Input() textAlign = 'text-center'

  /**
   * The font size of the tooltip content.
   */
  @Input() fontSize = '1rem'

  /**
   * The tooltip trigger
   * Possible values: 'hover' or 'click'.
   */
  @Input() trigger: 'hover' | 'click' = 'hover'

}