import React from "react";

/**
 * Hover tooltip. Wraps a trigger; shows a small dark label.
 */
export function Tooltip({ label, placement = "top", children, style = {} }) {
  const [show, setShow] = React.useState(false);
  const pos = {
    top: { bottom: "calc(100% + 7px)", left: "50%", transform: "translateX(-50%)" },
    bottom: { top: "calc(100% + 7px)", left: "50%", transform: "translateX(-50%)" },
    left: { right: "calc(100% + 7px)", top: "50%", transform: "translateY(-50%)" },
    right: { left: "calc(100% + 7px)", top: "50%", transform: "translateY(-50%)" },
  }[placement];

  return (
    <span
      onMouseEnter={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
      style={{ position: "relative", display: "inline-flex", ...style }}
    >
      {children}
      {show && label && (
        <span
          role="tooltip"
          style={{
            position: "absolute",
            zIndex: 50,
            ...pos,
            padding: "5px 9px",
            borderRadius: "var(--radius-sm)",
            background: "var(--ctv-surface-3)",
            border: "1px solid var(--border-control)",
            boxShadow: "var(--shadow-pop)",
            color: "var(--text-primary)",
            font: "var(--weight-medium) var(--text-xs)/1.2 var(--font-sans)",
            whiteSpace: "nowrap",
            pointerEvents: "none",
          }}
        >
          {label}
        </span>
      )}
    </span>
  );
}