src/app/components/InfoTooltip.tsx

import { HelpCircle } from 'lucide-react';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from './ui/tooltip';

interface InfoTooltipProps {
  content: string;
}

export function InfoTooltip({ content }: InfoTooltipProps) {
  return (
    <TooltipProvider>

      <Tooltip>

        <TooltipTrigger asChild>

          <button className="inline-flex items-center justify-center text-slate-400 hover:text-slate-600 transition-colors">

            <HelpCircle className="w-4 h-4" />

          </button>

        </TooltipTrigger>

        <TooltipContent side="top" className="max-w-xs">

          <p className="text-sm">{content}</p>

        </TooltipContent>

      </Tooltip>

    </TooltipProvider>
  );
}