import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { useState, useCallback } from "react";
import debounce from "lodash/debounce";
import { useNavigate } from "react-router-dom";


export const SearchBar = () => {
  const [query, setQuery] = useState("");
  const navigate = useNavigate()
  const debouncedSearch = useCallback(
    debounce((value: string) => {
      navigate(`/letter-list?keyword=${value}`, { replace: true })
    }, 300),
    []
  );

  return (
    <div className="flex-1 max-w-xl ">
      <div className="group relative">
        <input
          type="search"
          value={query}
          onChange={(e) => {
            setQuery(e.target.value);
            debouncedSearch(e.target.value);
          }}
          placeholder="搜索信件..."
          className="w-full rounded-lg border border-transparent bg-[#0B1A32] 
                     px-4 py-2.5 pl-10 text-white placeholder-[#8EADD4] 
                     transition-all duration-300 focus:border-[#8EADD4] 
                     focus:outline-none focus:ring-1 focus:ring-[#8EADD4]"
          aria-label="搜索"
        />
        <MagnifyingGlassIcon
          className="absolute left-3 top-3 h-5 w-5 text-[#8EADD4] 
                     transition-colors group-hover:text-white"
        />
      </div>
    </div>
  );
};