import { cloneElement, type ReactElement, useId } from "react";
import "./tooltip.scss";

/**
 * App-wide tooltip primitive — CSS-only (no positioning library, same
 * "let the browser/CSS do the work" philosophy as `Dialog.tsx`'s native
 * `<dialog>`): a `position: relative` wrapper around `children` (the
 * trigger) plus a `role="tooltip"` bubble, shown via `:hover`/
 * `:focus-within` on the wrapper (see `tooltip.scss`) rather than JS state.
 *
 * `children` must be a single focusable element (e.g. the highlighted
 * `<button>` in `StepDescription.tsx`) — this component clones
 * it to attach `aria-describedby`, linking the trigger to the bubble's text
 * for screen readers, the same way a native `title` attribute would be
 * announced, but with real, styleable content instead of the UA tooltip.
 */
export function Tooltip({
  content,
  children,
}: {
  content: string;
  children: ReactElement<{ "aria-describedby"?: string }>;
}) {
  const id = useId();

  return (
    <span className="tooltip">
      {cloneElement(children, { "aria-describedby": id })}
      <span role="tooltip" id={id} className="tooltip__bubble">
        {content}
      </span>
    </span>
  );
}
