"use client";

import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { SearchIcon } from "lucide-react";

import { Input } from "@/components/ui/input";

export function CariPelanggan() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [nilai, setNilai] = useState(searchParams.get("search") ?? "");

  useEffect(() => {
    const current = searchParams.get("search") ?? "";
    if (nilai === current) return;

    const timer = setTimeout(() => {
      const url = nilai
        ? `/master/pelanggan?search=${encodeURIComponent(nilai)}`
        : "/master/pelanggan";
      router.replace(url);
    }, 300);
    return () => clearTimeout(timer);
  }, [nilai, searchParams, router]);

  return (
    <div className="relative">
      <SearchIcon className="absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
      <Input
        className="pl-8"
        placeholder="Cari pelanggan..."
        value={nilai}
        onChange={(e) => setNilai(e.target.value)}
      />
    </div>
  );
}