'use client'

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

export default function BlogSearch() {
  const router = useRouter()
  const t = useTranslations('Blog')
  const [query, setQuery] = useState('')
  const [isOpen, setIsOpen] = useState(false)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (query.trim()) {
      router.push({ pathname: '/blogs', query: { search: query.trim() } })
      setIsOpen(false)
    }
  }

  return (
    <>
      <button
        onClick={() => setIsOpen(true)}
        className="p-2 text-gray-custom hover:text-primary transition"
        aria-label={t('searchPlaceholder')}
      >
        <Search size={20} />
      </button>

      {isOpen && (
        <div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4">
          <div className="w-full max-w-xl">
            <form onSubmit={handleSubmit} className="relative">
              <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder={t('searchPlaceholder')}
                className="w-full px-6 py-4 pr-12 text-lg rounded-full outline-none"
                autoFocus
              />
              <button type="submit" className="absolute right-4 top-1/2 -translate-y-1/2 text-primary">
                <Search size={22} />
              </button>
            </form>
            <button
              onClick={() => setIsOpen(false)}
              className="absolute top-6 right-6 text-white text-3xl hover:text-primary transition"
            >
              <X size={32} />
            </button>
          </div>
        </div>
      )}
    </>
  )
}