import styled from '@emotion/styled';
import { useState } from 'react';

const Tooltip = ({ tooltipText }) => {
  const [isTooltipVisible, setTooltipVisible] = useState(false);

  return (
    <TooltipDiv
      className="tooltip-trigger"
      onMouseEnter={() => setTooltipVisible(true)}
      onMouseLeave={() => setTooltipVisible(false)}
    >
      ?
      {isTooltipVisible && (
        <div className="tooltip-box" style={{ whiteSpace: 'pre-line' }}>
          {tooltipText}
        </div>
      )}
    </TooltipDiv>
  );
};

const TooltipDiv = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #ccc;
  color: white;
  font-size: 0.8rem;
  cursor: help;
  position: absolute;
  top: 0;
  right: 0;

  .tooltip-box {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: small;
    min-width: 10rem;
    max-width: 15rem;
    margin-bottom: 0.5rem;
    z-index: 100;
  }

  .tooltip-box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
  }
`;

export default Tooltip;
