import { Info } from 'lucide-react';

import * as React from 'react';

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/Components/ui/tooltip';
import { cn } from '@/lib/utils';

interface InfoTooltipProps {
  content: React.ReactNode;
  className?: string;
  iconClassName?: string;
  side?: 'top' | 'right' | 'bottom' | 'left';
  ariaLabel?: string;
}

/**
 * A reusable info tooltip component with an info icon trigger.
 * Used for providing contextual help and explanations throughout the UI.
 */
export function InfoTooltip({
  content,
  className,
  iconClassName,
  side = 'top',
  ariaLabel,
}: InfoTooltipProps) {
  // If ariaLabel not provided, create a truncated version from content
  let computedAriaLabel = ariaLabel;
  if (!computedAriaLabel && typeof content === 'string') {
    computedAriaLabel = content.length > 50 ? content.slice(0, 50) + '...' : content;
  }
  if (!computedAriaLabel) {
    computedAriaLabel = 'More information';
  }

  return (
    <TooltipProvider delayDuration={300}>
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            type="button"
            className={cn(
              'inline-flex items-center justify-center rounded-full p-0.5 text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
              className,
            )}
            aria-label={computedAriaLabel}
          >
            <Info className={cn('h-4 w-4', iconClassName)} />
          </button>
        </TooltipTrigger>
        <TooltipContent side={side} className="max-w-xs">
          {content}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}