import * as React from "react";
import { cn } from "@/lib/utils";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
import { Info } from "lucide-react";

interface TooltipInfoProps extends React.HTMLAttributes<HTMLDivElement> {
  content: string;
  children?: React.ReactNode;
  side?: "top" | "right" | "bottom" | "left";
}

export function TooltipInfo({
  content,
  children,
  side = "top",
  className,
  ...props
}: TooltipInfoProps) {
  return (
    <TooltipProvider delayDuration={0}>
      <Tooltip>
        <TooltipTrigger asChild>
          <span
            data-slot="tooltip-info"
            className={cn(
              "inline-flex items-center cursor-help",
              className
            )}
            {...props}
          >
            {children || (
              <Info
                size={14}
                className="text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors duration-100"
              />
            )}
          </span>
        </TooltipTrigger>
        <TooltipContent
          side={side}
          className="max-w-xs bg-[var(--bg-elevated)] text-[var(--text-primary)] border border-[var(--border-default)] text-xs"
        >
          {content}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}