Function ChoiceAdBanner

cli/src/components/choice-ad-banner.tsx:65–181

({
  ads,
  onClick,
  onImpression,
})

}

export const ChoiceAdBanner: React.FC<ChoiceAdBannerProps> = ({
  ads,
  onClick,
  onImpression,
}) => {
  const theme = useTheme()
  const { terminalWidth } = useTerminalDimensions()
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)

  // Available width for cards (terminal minus left/right margin of 1 each)
  const colAvail = terminalWidth - 2

  // Only show as many ads as fit with a healthy minimum width; hide the rest
  const maxVisible = Math.max(1, Math.floor(colAvail / MIN_CARD_WIDTH))
  const visibleAds = useMemo(
    () => (ads.length > maxVisible ? ads.slice(0, maxVisible) : ads),
    [ads, maxVisible],
  )

  const widths = useMemo(() => columnWidths(visibleAds.length, colAvail), [visibleAds.length, colAvail])

  // Fire impressions only for visible ads
  useEffect(() => {
    if (onImpression) {
      for (const ad of visibleAds) {
        onImpression(ad)
      }
    }
  }, [visibleAds, onImpression])

  const hoverBorderColor = theme.primary

  return (
    <box
      style={{
        width: '100%',
        flexDirection: 'column',
      }}
    >
      {/* Card columns */}
      <box
        style={{
          marginLeft: 1,
          marginRight: 1,
          flexDirection: 'row',
        }}
      >
        {visibleAds.map((ad, i) => {
          const isHovered = hoveredIndex === i
          const ctaText = ad.cta || ad.title || 'Learn more'
          const label = getAdDisplayLabel(ad)
          const labelMaxWidth = Math.max(0, widths[i] - ctaText.length - 5)
          const labelText = truncateToWidth(label.text, labelMaxWidth)

          return (
            <Button
              key={ad.impUrl}
              onClick={() => {