import { SvgInformationCircle } from '@chainlink/blocks-icons'
import {
  ResponsiveTooltip,
  ResponsiveTooltipTrigger,
  ResponsiveTooltipContent,
  type ResponsiveTooltipContentProps,
} from './ResponsiveTooltip'

/**
 * Pre-composed tooltip with a muted information-circle icon as the trigger.
 * Use when you need a lightweight inline tooltip without wiring up a custom
 * trigger. Accepts all ResponsiveTooltipContent props for positioning.
 */
export const InfoTooltip = ({
  children,
  ...props
}: React.PropsWithChildren<ResponsiveTooltipContentProps>) => {
  return (
    <ResponsiveTooltip>
      <ResponsiveTooltipTrigger>
        <SvgInformationCircle width={16} height={16} color="muted" />
      </ResponsiveTooltipTrigger>
      <ResponsiveTooltipContent {...props} hideArrow={false}>
        {children}
      </ResponsiveTooltipContent>
    </ResponsiveTooltip>
  )
}