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 { useState } from "react";
import SearchField from "./SearchField";

function SearchBar({
  data,
  fields,
  setData,
  setFields,
  setDoctors,
  matchedCity,
  matchedState,
  confirmedData,
  setConfirmedData,
}) {
  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
        data={data}
        setData={setData}
        setDoctors={setDoctors}
        matchedCity={matchedCity}
        matchedState={matchedState}
        confirmedData={confirmedData}
        setConfirmedData={setConfirmedData}
      >
        <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 fields={fields} setFields={setFields} />
      <SendReq
        fields={fields}
        setDoctors={setDoctors}
        matchedCity={matchedCity}
        matchedState={matchedState}
      />
    </ButtonGroup>
  );
}

export default SearchBar;