
import React from 'react';
import { Info } from 'lucide-react';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';

const InfoTooltip = ({ content, source, calculation }) => {
  return (
    <TooltipProvider>
      <Tooltip delayDuration={300}>
        <TooltipTrigger asChild>
          <span className="inline-flex items-center ml-2 cursor-help text-[#6A6A6A] hover:text-[#338660] transition-colors">
            <Info className="w-3.5 h-3.5" />
          </span>
        </TooltipTrigger>
        <TooltipContent className="max-w-xs bg-[#1A1A1A] text-white border-[#333333] p-3 shadow-xl">
          <div className="space-y-2 text-xs">
            {content && <p className="font-medium">{content}</p>}
            {calculation && (
              <div className="pt-2 border-t border-white/10">
                <span className="text-gray-400 block mb-0.5 uppercase text-[10px] tracking-wider">Calcul</span>
                <p className="font-mono text-gray-300">{calculation}</p>
              </div>
            )}
            {source && (
              <div className="pt-2 border-t border-white/10">
                <span className="text-gray-400 block mb-0.5 uppercase text-[10px] tracking-wider">Source</span>
                <p className="text-[#338660]">{source}</p>
              </div>
            )}
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

export default InfoTooltip;
