/**
 * MetricTooltip — a small ⓘ icon that shows a plain-language explanation
 * of a metric on hover. Designed for executive dashboards where not everyone
 * knows what "MTTD" or "partial coverage" means.
 */

interface MetricTooltipProps {
  title: string;
  description: string;
  /** Optional extra context line (e.g. "Why it matters") */
  context?: string;
  /** Positioning hint — defaults to 'below' */
  position?: "below" | "above" | "left";
}

export default function MetricTooltip({
  title,
  description,
  context,
  position = "below",
}: MetricTooltipProps) {
  const posClass =
    position === "above"
      ? "bottom-full mb-2 left-0"
      : position === "left"
      ? "right-full mr-2 top-0"
      : "top-full mt-2 left-0";

  return (
    <span className="relative group inline-flex items-center ml-1.5 align-middle">
      {/* The ⓘ icon */}
      <span className="flex h-4 w-4 cursor-help items-center justify-center rounded-full border border-gray-600 bg-gray-800 text-[9px] font-bold text-gray-400 hover:border-cyan-500/50 hover:text-cyan-400 transition-colors select-none">
        i
      </span>

      {/* Tooltip panel */}
      <span
        className={`
          pointer-events-none absolute ${posClass} z-50 w-64
          rounded-xl border border-gray-700 bg-gray-900 p-3 shadow-xl
          opacity-0 transition-opacity duration-150 group-hover:opacity-100
        `}
      >
        {/* Arrow */}
        {position !== "above" && position !== "left" && (
          <span className="absolute bottom-full left-3 border-4 border-transparent border-b-gray-700" />
        )}
        <p className="mb-1.5 text-xs font-semibold text-white">{title}</p>
        <p className="text-[11px] leading-snug text-gray-300">{description}</p>
        {context && (
          <p className="mt-1.5 text-[10px] leading-snug text-cyan-400/80 border-t border-gray-800 pt-1.5">
            {context}
          </p>
        )}
      </span>
    </span>
  );
}
