// Simple InfoTooltip component for field explanations
"use client";
import { type ReactNode, useState } from "react";

export default function InfoTooltip({ children, tip }: { children: ReactNode; tip: string }) {
  const [show, setShow] = useState(false);
  return (
    <span className="relative inline-block align-middle">
      <span
        className="ml-2 text-blue-500 cursor-pointer"
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
        tabIndex={0}
        onFocus={() => setShow(true)}
        onBlur={() => setShow(false)}
        aria-label="Info"
      >
        {children}
      </span>
      {show && (
        <span className="absolute left-1/2 z-50 -translate-x-1/2 mt-2 w-64 p-3 bg-gray-900 text-xs text-white rounded shadow-lg border border-blue-400 whitespace-normal">
          {tip}
        </span>
      )}
    </span>
  );
}
