'use client'

import { useState } from 'react'
import { CiCircleInfo } from 'react-icons/ci'

interface TooltipProps {
  content: string | React.ReactNode
}

const Tooltip = ({ content }: TooltipProps) => {
  const [showTooltip, setShowTooltip] = useState(false)

  return (
    <div className="relative flex items-center overflow-visible">
      <button
        type="button"
        className="text-orange hover:text-orange/80 focus:outline-none"
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
        onClick={() => setShowTooltip(!showTooltip)}
      >
        <CiCircleInfo className="w-4 h-4" />
      </button>
      {showTooltip && (
        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 bg-white rounded-xl text-center shadow-lg text-sm text-gray-700 w-max max-w-xs z-10">
          {content}
          <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-white transform rotate-45"></div>
        </div>
      )}
    </div>
  )
}

export default Tooltip