frontend/src/components/ModelInfoIcon.tsx

import React, { useRef, useEffect, useState } from 'react'
import { InformationCircleIcon, DocumentTextIcon } from '@heroicons/react/24/outline'
import GitHubIcon from './icons/GitHubIcon'
import { Tooltip as ReactTooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'
import Descriptions from '../Descriptions'

interface ModelInfoIconProps {
  modelName: string
}

const ModelInfoIcon: React.FC<ModelInfoIconProps> = ({ modelName }) => {
  const [descriptionsLoaded, setDescriptionsLoaded] = useState(false)
  const descriptions = useRef(Descriptions.getInstance())

  useEffect(() => {
    descriptions.current.load().then(() => setDescriptionsLoaded(true))
  }, [])

  const fullName = descriptions.current.getModelFullName(modelName) || modelName
  const description = descriptions.current.getModelDescription(modelName)
  const paperUrl = descriptions.current.getModelPaperUrl(modelName)
  const githubUrl = descriptions.current.getModelGithubUrl(modelName)

  return (
    <>
      <span
        className="ml-1 cursor-pointer"
        data-tooltip-id={`tooltip-${modelName}`}
        tabIndex={0}
        aria-label={`Show info for ${modelName}`}
        role="button"
      >
        <InformationCircleIcon className="h-4 w-4 text-blue-400 hover:text-blue-600" />
      </span>
      <ReactTooltip
        id={`tooltip-${modelName}`}
        place="top"
        className="z-[10000] max-w-xs !opacity-100 bg-base-100 text-base-content"
        style={{
          boxShadow: '0 0 10px rgba(0,0,0,0.2)',
          zIndex: 10000, // Ensure tooltips appear above sticky elements
        }}
        openOnClick={false}
        clickable={true}
        delayHide={200}
        positionStrategy="fixed"
      >
        <div className="p-2 text-xs text-left relative z-[10000]">
          <div className="font-semibold mb-1">{fullName}</div>
          <div className="mb-2 whitespace-pre-line">
            {description || 'No description available.'}
          </div>
          <div className="flex space-x-4">
            {paperUrl && (
              <div>
                <a
                  href={paperUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-blue-400 hover:text-blue-300 underline flex items-center"
                >
                  <DocumentTextIcon className="h-3 w-3 mr-1" />
                  Paper
                </a>
              </div>
            )}
            {githubUrl && (
              <div>
                <a
                  href={githubUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-blue-400 hover:text-blue-300 underline flex items-center"
                >
                  <GitHubIcon className="h-3 w-3 mr-1" />
                  GitHub
                </a>
              </div>
            )}
          </div>
        </div>
      </ReactTooltip>
    </>
  )
}

export default ModelInfoIcon