'use client'

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

/** Caja de búsqueda de la armería: navega a /armory?tab=&q=. */
export function ArmorySearchBox({ tab, initialQuery }: { tab: string; initialQuery: string }) {
  const t = useTranslations('Armory')
  const router = useRouter()
  const [q, setQ] = useState(initialQuery)

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

  return (
    <form onSubmit={submit} className="armory-search">
      <input
        className="forum-input"
        value={q}
        onChange={(e) => setQ(e.target.value)}
        placeholder={t('searchPlaceholder')}
        maxLength={100}
      />
      <button type="submit" className="nice_button">
        {t('search')}
      </button>
    </form>
  )
}