import React from "react";

/**
 * <InfoTooltip message="This is a helpful tooltip" />
 *
 * Re-usable tiny "i" badge that shows its `message` prop in a native
 * browser tooltip (`title=`). Sized for use inline with headings or
 * labels. Uses Tailwind classes only—no external libs required.
 */
export default function InfoTooltip({ message = "" }) {
  if (!message) return null;

  return (
    <span
      className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-white text-[10px] font-semibold cursor-help"
      title={message}
    >
      i
    </span>
  );
}