import { TextField } from "@mui/material";
import React from "react";

function SearchField({ filter, updateData }) {
  return (
    <TextField
      variant="standard"
      value={filter.name}
      onChange={(e) => updateData("name", e.target.value)}
      InputProps={{
        disableUnderline: true,
      }}
      sx={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        width: "100% !important",
        "& .MuiInput-root": {
          padding: "0",
          borderBottom: "none",
        },
        "& .MuiInputBase-input": {
          color: "#6C757D",
          padding: "0px",
        },
      }}
      dir="rtl"
      placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
      className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
    />
  );
}

export default SearchField;