'use client'

import React, { useState } from 'react'
import { useRouter } from 'next/navigation'

export function HomeSearch() {
  const router = useRouter()
  const [query, setQuery] = useState('')

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (query.trim()) {
      router.push(`/spots?q=${encodeURIComponent(query.trim())}`)
    } else {
      router.push('/mapa')
    }
  }

  return (
    <form className="search" onSubmit={handleSearch}>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Procura uma cidade ou local…"
        aria-label="Pesquisar local"
      />
      <button type="submit" className="search-btn">Procurar</button>
    </form>
  )
}