import { JSX } from 'react';

import { Info } from 'lucide-react';

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@kit/ui/tooltip';

export function InfoTooltip({
  content,
  icon,
}: {
  content?: string;
  icon?: JSX.Element;
}) {
  if (!content) return null;
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          {icon || <Info className="size-4 cursor-pointer" />}
        </TooltipTrigger>
        <TooltipContent>{content}</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}