import { ToolTipProps } from "./types";

export function Tooltip({ tooltipMsg, className, children }: ToolTipProps) {
  return (
    <>
      <style>{`
        .tooltip-custom {
          position: relative;
          cursor: pointer;
          margin-top: 7px;
        }
        .tooltip-custom::after {
          display: none;
          position: absolute;
          text-align: center;
          z-index: 999;
          content: attr(data-text);
          top: 0;
          left: -200%;
          transform: translate(-50%, calc(-100% - 10px));
          line-height: 1.1rem;
          padding-left: 1rem;
          padding-right: 1rem;
          border-radius: 8px;
          color: white;
          background-color: black;
          padding-bottom: 0.75rem;
          padding-top: 0.75rem;
          width: 270px;
          font-size: 14px;
        }
        .tooltip-custom:hover::after {
          display: block;
        }
        .tooltip-custom::before {
          background-color: black;
          content: " ";
          display: none;
          position: absolute;
          width: 15px;
          height: 15px;
          z-index: 999;
          top: 0;
          left: 50%;
          transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
        }
        .tooltip-custom:hover::before {
          display: block;
        }
        @media (max-width: 640px) {
          .tooltip-custom::after {
            left: -124px;
          }
        }
        @media (max-width: 343px) {
          .tooltip-custom::after {
            left: 80px;
            width: 160px;
          }
        }
      `}</style>
      <span
        className={`tooltip-custom ${className || ""}`}
        data-text={tooltipMsg}
      >
        {children}
      </span>
    </>
  );
}

Tooltip.displayName = "Tooltip";

export type { ToolTipProps };