'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { useRouter } from '@/i18n/navigation'

export function ForumSearchBox({ initial = '' }: { initial?: string }) {
  const t = useTranslations('Forum')
  const router = useRouter()
  const [q, setQ] = useState(initial)

  function submit(e: React.FormEvent) {
    e.preventDefault()
    const query = q.trim()
    if (query.length < 2) return
    router.push(`/forum/search?q=${encodeURIComponent(query)}`)
  }

  return (
    <form onSubmit={submit} className="centered separate">
      <input
        type="text"
        value={q}
        onChange={(e) => setQ(e.target.value)}
        placeholder={t('searchPlaceholder')}
      />{' '}
      <button type="submit" className="search-items-button">
        {t('search')}
      </button>
    </form>
  )
}