import { Button, ButtonGroup } from "@mui/material";
import SettingD from "@/components/icons/SettingD";
import ArrowBottomD from "@/components/icons/ArrowBottomD";
import FilterModal from "../modal/FilterModal";
import SendReq from "./SendReq";
import SearchField from "./SearchField";

function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
  return (
    <ButtonGroup
      variant="contained"
      className="!bg-[#FFF] !w-full lg:!w-[60%] lg:!max-w-[734px] !rounded-lg !overflow-hidden 
        flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
        !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
    >
      <FilterModal
        filter={filter}
        sendReq={sendReq}
        setFilter={setFilter}
        updateData={updateData}
        setDataInURL={setDataInURL}
      >
        <Button
          color="secondary"
          variant="contained"
          className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
        >
          <div className="min-w-[20px] min-h-[20px]">
            <SettingD />
          </div>
          <p className="text-[#616161] text-[14px] md:text-[16px] font-medium mx-2">
            فیلترها
          </p>
          <div className="w-[20px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
            <ArrowBottomD />
          </div>
        </Button>
      </FilterModal>
      <SearchField
        filter={filter}
        setFilter={setFilter}
        setDataInURL={setDataInURL}
        sendReq={sendReq}
      />
      <SendReq
        filter={filter}
        sendReq={sendReq}
        setFilter={setFilter}
        setDataInURL={setDataInURL}
      />
    </ButtonGroup>
  );
}

export default SearchBar;