"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Input } from "@/components/ui/input";

export function UserSearch({ initialQ = "" }: { initialQ?: string }) {
  const router = useRouter();
  const [q, setQ] = useState(initialQ);

  useEffect(() => {
    const timer = setTimeout(() => {
      const p = new URLSearchParams();
      if (q.trim()) p.set("q", q.trim());
      router.push(p.toString() ? `/user-management?${p}` : "/user-management");
    }, 300);

    return () => clearTimeout(timer);
  }, [q, router]);

  return (
    <div className="flex items-center gap-2 mb-4">
      <Input
        placeholder="Search name, email, or phone..."
        value={q}
        onChange={(e) => setQ(e.target.value)}
        className="h-9 w-64"
      />
    </div>
  );
}