import React from 'react';
import { RiErrorWarningFill } from 'react-icons/ri';

const Tooltip = ({ text }: { text: string }): JSX.Element => {
  return (
    <div className="relative group cursor-pointer text-[#7e7e7e]">
      <RiErrorWarningFill className="text-base" />
      <div className="w-[160px] rounded-md absolute hidden group-hover:flex transition-opacity duration-200 text-xs -right-1 top-6 bg-white border border-zinc-200 p-[2px] z-50">
        <div className="relative bg-[#f4f4f4] p-2 text-[#808080] text-xs">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="11"
            fill="none"
            viewBox="0 0 16 11"
            className="absolute right-1 -top-3"
          >
            <path
              fill="#E6E6E6"
              stroke="#D7D7D7"
              d="M9.5 1.962c-2.39 4.182-6.167 7.333-9 8h14c-1.5-4.667-3-11.5-5-8Z"
            ></path>
          </svg>
          {text}
        </div>
      </div>
    </div>
  );
};

export default Tooltip;