import ArrowBottomP from "@/components/icons/ArrowBottomP";
import ExportP from "@/components/icons/ExportP";
import SearchD from "@/components/icons/SearchD";
import { Button, ButtonGroup, TextField } from "@mui/material";

function SearchDoctor() {
  return (
    <div className="flex flex-col sm:flex-row items-start sm:items-center gap-y-[20px] justify-between mt-[20px] md:mt-[22px] lg:mt-[24px] ">
      <ButtonGroup
        variant="contained"
        className="lg:!w-[55%] !rounded-[4px] !overflow-hidden 
                flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF] dark:!border-[#343645]"
      >
        <TextField
          variant="standard"
          InputProps={{
            disableUnderline: true,
          }}
          sx={{
            background: "transparent !important",
            "& .MuiInputBase-root": { height: "100%" },
            "& .MuiInput-root": { borderBottom: "none" },
            "& .MuiInputBase-input": {
              // background: "red !important",
              color: "#7E7E7E",
              padding: "0",
            },
          }}
          placeholder="جستجو براساس نام پزشک..."
          dir="rtl"
          className={`!shadow-none !w-full !px-5 !h-full !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
        />
        <Button
          className="
                    !rounded-[4px] !p-[8px] !w-[56px] !h-[56px] !max-w-[40px] !max-h-[40px] 
                "
        >
          <SearchD />
        </Button>
      </ButtonGroup>
      <Button
        variant="outlined"
        className="!border-[#5559CE] dark:!bg-[#C7CEF4] dark:!text-[#5559CE] !flex !text-[14px] md:!text-[16px] !items-center !gap-[4px] md:!gap-[5px] lg:!gap-[6px] !rounded-[4px] !py-[8px] md:!py-[9px] !px-[12px] sm:!px-[14px] md:!px-[16px] lg:!px-[18px]"
      >
        <ExportP />
        خروجی گرفتن
        <ArrowBottomP />
      </Button>
    </div>
  );
}

export default SearchDoctor;