"use client";

import { useState, useEffect } from "react";
import { IoSearchOutline } from "react-icons/io5";

interface FilterSearchBarProps {
  value: string;
  onSearch: (query: string) => void;
}

export function FilterSearchBar({ value, onSearch }: FilterSearchBarProps) {
  const [input, setInput] = useState(value);
  useEffect(() => {
    setInput(value);
  }, [value]);

  useEffect(() => {
    const timer = setTimeout(() => {
      onSearch(input);
    }, 500);

    return () => clearTimeout(timer);
  }, [input, onSearch]);
  return (
    <div className="relative w-full sm:max-w-72">
      <IoSearchOutline
        size={20}
        className="absolute left-4 top-1/2 -translate-y-1/2 text-[#8B5CF6]"
      />

      <input
        type="text"
        placeholder="Search"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        className="
          h-11 w-full
          rounded-xl
          border border-[#E7E3F2]
          bg-white
          px-12
          text-sm text-[#333]
          outline-none
          placeholder:text-[#9B96AA]
          focus:border-[#8B5CF6]
          focus:ring-2
          focus:ring-[#8B5CF6]/10
        "
      />
    </div>
  );
}
