import { useState, useEffect, forwardRef } from 'react'
import { Box, Input } from '../primitives'
import { useRouter } from 'next/router'

interface GlobalSearchProps {
  placeholder: string;
}

const GlobalSearch = forwardRef((props: GlobalSearchProps, ref) => {
  const [search, setSearch] = useState('')
  const router = useRouter()
  const { collectionId } = router.query // Assuming collectionId is part of the route

  useEffect(() => {
    const fetchResults = async () => {
      if (search.length >= 2) {
        const res = await fetch(`/api/collectionSearch?query=${search}&collectionId=${collectionId}`)
        const data = await res.json()
        console.log(data)
      }
    }
    fetchResults()
  }, [search, collectionId])

  return (
    <Box css={{ position: 'relative', width: '100%' }}>
      <Input
        {...props}
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder={props.placeholder}
      //  ref={ref}
      />
    </Box>
  )
})

export default GlobalSearch