import { ReactNode, useState } from 'react';

interface InfoPillProps {
  text: string;
  icon: ReactNode;
  tooltip?: string;
}

const InfoPill = ({ text, icon, tooltip }: InfoPillProps) => {
  const [showTooltip, setShowTooltip] = useState(false);

  return (
    <div className='relative inline-block'>
      <div
        className='flex h-8 w-auto cursor-default flex-row items-center gap-2 rounded-full bg-quaternary px-4 font-mono text-xs whitespace-nowrap uppercase'
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        {icon}
        {text}
      </div>
      {tooltip && showTooltip && (
        <div className='absolute top-full left-1/2 z-9999 mt-2 w-[200px] -translate-x-1/2 transform rounded bg-tertiary px-4 py-2 text-center text-sm text-primary'>
          {tooltip}
        </div>
      )}
    </div>
  );
};

export default InfoPill;