/* eslint-disable react/prop-types */
import { useState } from "react";

export default function FooterTooltip({ triggerContent, tooltipContent }) {
  const [isHidden, setIsHidden] = useState(true);
  const tooltipButtonStyles = {
    position: "relative",
    background: "transparent",
    border: "none",
    display: "inline-block",
  };
  const triangleStyles = {
    position: "absolute",
    top: "100%",
    left: "50%",
    translate: "-50% 0",
    border: "6px solid transparent",
    borderTop: "6px solid rgb(51,51,51)",
    width: "6px",
    height: "6px",
  };
  const tooltipStyles = isHidden
    ? {
        display: "none",
      }
    : {
        position: "absolute",
        bottom: "calc(100% + 6px)",
        left: "50%",
        width: "300px",
        padding: "8px",
        borderRadius: "4px",
        fontSize: "0.9rem",
        backgroundColor: "rgb(51,51,51)",
        color: "rgb(255,255,255)",
        maxWidth: "max-content",
        translate: "-50% 0",
      };
  return (
    <span className="qpp-tooltip-wrapper" style={{ position: "relative" }}>
      <button
        role="tooltip"
        className="qpp-tooltip"
        type="button"
        style={tooltipButtonStyles}
        onMouseEnter={() => setIsHidden(false)}
        onMouseLeave={() => setIsHidden(true)}
        onFocus={() => setIsHidden(false)}
        onBlur={() => setIsHidden(true)}
      >
        {triggerContent}
        <span style={tooltipStyles}>
          {tooltipContent}
          <div style={triangleStyles} />
        </span>
      </button>
    </span>
  );
}