import { useSearch } from '@junwon/catalog-tech/hooks/useSearch'
import { useProduct } from '@junwon/config'
import { GenerativePage } from '@junwon/generation-tech'
import { useEffect, useRef } from 'react'

export function SearchOutputPage() {
  const { getSearchQuery } = useSearch()
  const { productName } = useProduct()
  const searchQuery = getSearchQuery()
  const isMounted = useRef(false)

  useEffect(() => {
    if (isMounted.current) return
    isMounted.current = true
  }, [])

  if (!searchQuery) return null

  const pageSpec = `Generate 5 search results for the query "${searchQuery}". Each result should link to real Wikipedia pages and include:
  - A clickable title in blue (use Text with col="$blue10")
  - A green URL below the title (use Text with col="$green10")
  - A brief description (use Text with col="$gray11")
  Each result should be wrapped in a YStack with space="$4" between items.`

  return <GenerativePage pageSpec={pageSpec} />
}