import { JSX } from 'react';

import { Info } from 'lucide-react';

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

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