import { useSyncExternalStore } from "react";
import { hintsEnabled, subscribeHints } from "../lib/hints";

type Side = "top" | "bottom" | "left";

/** Wrap any element to show a short glass hint caption on hover — but only while the
 *  app-wide hints toggle (Settings → Appearance) is on. */
export default function Tooltip({
  hint,
  side = "top",
  children,
}: {
  hint: string;
  side?: Side;
  children: React.ReactNode;
}) {
  const enabled = useSyncExternalStore(subscribeHints, hintsEnabled, hintsEnabled);
  if (!enabled || !hint) return <>{children}</>;

  const place =
    side === "bottom"
      ? "top-full mt-2 left-1/2 -translate-x-1/2"
      : side === "left"
        ? "right-full mr-2 top-1/2 -translate-y-1/2"
        : "bottom-full mb-2 left-1/2 -translate-x-1/2";

  return (
    <span className="relative inline-flex group/tip">
      {children}
      <span
        role="tooltip"
        className={`glass pointer-events-none absolute ${place} z-50 w-max max-w-[220px] px-2.5 py-1.5 rounded-lg text-xs leading-snug text-fg font-normal normal-case tracking-normal opacity-0 group-hover/tip:opacity-100 transition-opacity duration-150`}
      >
        {hint}
      </span>
    </span>
  );
}