import { ReactNode } from "react";

export interface TooltipProps {
  /**
   * Tooltip text - can be string or another component
   */
  tooltipMessage: ReactNode;
  /**
   * The targeted component
   */
  children: ReactNode;
}

const Tooltip = ({ tooltipMessage, children }: TooltipProps) => {
  return (
    <div
      className="group cursor-pointer relative focus:outline-none overflow-hidden 
      hover:overflow-visible"
    >
      {/* Tooltip will be shown under the component(children) when the children is onHover */}
      {children}
      {/* Creating the tooltip and give it a postion */}
      <div
        className="absolute left-1/2 -bottom-10 p-2 rounded transition-all duration-1000 
        bg-gray-900 text-white text-sm -translate-x-1/2 opacity-0 z-40
        
        leading-none whitespace-no-wrap w-fit text-center

        before:content-[''] before:absolute before:-top-1 before:left-1/2 before:-translate-x-1/2 
        before:w-3 before:h-3 before:bg-gray-900 before:rotate-45 before:rounded-sm 
         
        group-hover:opacity-100"
      >
        {tooltipMessage}
      </div>
    </div>
  );
};

export default Tooltip;