import type { ReactNode } from "react";

export function Tooltip({
  content,
  children,
}: {
  content: ReactNode;
  children: ReactNode;
}) {
  return (
    <span className="group relative inline-flex">
      {children}
      <span className="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-1/2 hidden -translate-x-1/2 whitespace-nowrap rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-overlay)] px-3 py-2 text-xs text-[var(--uhuru-text-primary)] shadow-[var(--uhuru-shadow-sm)] group-hover:block">
        {content}
      </span>
    </span>
  );
}