import { useState } from "react";
import { Button } from "@mui/material";
import SearchD from "@/components/icons/SearchD";
import { useRouter } from "next/navigation";

function FilterButton({ limit, selected, filterData }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  const sendReq = () => {
    setLoading(true);
    const newSelected = { ...selected, page: 1, limit };
    filterData(newSelected).finally(() => {
      setLoading(false);
      const searchParams = new URLSearchParams(window.location.search);
      searchParams.set("page", 1);
      router.push(`?${searchParams.toString()}`);
    });
  };

  return (
    <Button
      onClick={sendReq}
      disabled={loading}
      className=" !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] !max-w-[38px] sm:!max-w-[44px] md:!max-w-[50px] lg:!max-w-[56px] !max-h-[38px] sm:!max-h-[44px] md:!max-h-[50px] lg:!max-h-[56px] "
    >
      <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px] grid place-items-center">
        {!loading && <SearchD />}
      </div>
      <SearchD />
    </Button>
  );
}

export default FilterButton;
