'use client';

import { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';

export default function LiveSearch() {
  const router = useRouter();
  const searchParams = useSearchParams();
  
  // خواندن مقدار جستجوی فعلی از URL
  const initialSearch = searchParams.get('search') || '';
  const [searchTerm, setSearchTerm] = useState(initialSearch);

  useEffect(() => {
    // ایجاد تاخیر ۵۰۰ میلی‌ثانیه‌ای (Debounce) برای جلوگیری از ارسال درخواست با هر حرف
    const delayDebounceFn = setTimeout(() => {
      if (searchTerm.trim()) {
        router.push(`?search=${searchTerm}`);
      } else {
        router.push(`?`); // اگر کادر خالی شد، سرچ پاک شود
      }
    }, 500);

    return () => clearTimeout(delayDebounceFn);
  }, [searchTerm, router]);

  return (
    <div className="flex gap-2 max-w-xl">
      <input 
        type="text" 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="نام محصول را وارد کنید (جستجوی زنده)..." 
        className="flex-1 border border-gray-300 rounded-lg p-3 outline-none focus:border-blue-500 transition-colors"
      />
      {searchTerm && (
        <button 
          onClick={() => setSearchTerm('')}
          className="bg-gray-200 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-300 font-bold flex items-center justify-center transition-colors"
        >
          پاک کردن
        </button>
      )}
    </div>
  );
}