type TooltipProps = {
  text: string;
  children?: React.ReactNode;
};

export default function Tooltip({ text, children }: TooltipProps) {
  return (
    <span className="group relative inline-flex">
      {children}
      <span
        role="tooltip"
        className="
          pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2
          rounded-md bg-neutral-800 px-2 py-1 text-xs text-neutral-100
          whitespace-nowrap opacity-0
          transition-opacity duration-150
          group-hover:opacity-100 group-focus-within:opacity-100
        "
      >
        {text}
      </span>
    </span>
  );
}