<script>
  import { Info, HelpCircle } from 'lucide-svelte';

  /**
   * @typedef {Object} Props
   * @property {string} text - Help text to display
   * @property {string} [title] - Optional title for the tooltip
   * @property {'info' | 'help'} [icon] - Icon type to display
   * @property {'top' | 'bottom' | 'left' | 'right'} [position] - Tooltip position
   * @property {string} [class] - Additional CSS classes
   */

  /** @type {Props} */
  let {
    text,
    title = '',
    icon = 'help',
    position = 'top',
    class: className = '',
  } = $props();

  const positionClasses = {
    top: 'tooltip-top',
    bottom: 'tooltip-bottom',
    left: 'tooltip-left',
    right: 'tooltip-right',
  };

  let IconComponent = $derived(icon === 'info' ? Info : HelpCircle);
</script>

<div
  class="tooltip {positionClasses[position]} {className}"
  data-tip={text}
  role="tooltip"
>
  <button
    type="button"
    class="btn btn-xs btn-ghost btn-circle"
    aria-label={title || 'Help'}
    tabindex="-1"
  >
    <IconComponent class="w-4 h-4 opacity-60" />
  </button>
</div>
