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

function Field({ title, type, updateValue, value, multiline, isPlaceHolder }) {
  return (
    <TextField
      placeholder={isPlaceHolder && title}
      label={!isPlaceHolder ? title : ""}
      type={type || "text"}
      className="!w-full !mx-auto !bg-transparent"
      onChange={(e) => updateValue(e.target.value)}
      sx={{
        "& .MuiFormLabel-root": {
          top: "-4px !important",
        },
        "& .MuiInputBase-input": { padding: "12.5px 14px" },
        "& .MuiInputBase-root": { borderRadius: "6px !important" },
        "& .MuiOutlinedInput-notchedOutline": {
          border: "1px solid #EFEFEF !important",
        },
        ".Mui-focused": {
          "& .MuiOutlinedInput-notchedOutline": {
            border: "1px solid #5559CE !important",
            transition: "0.5s all",
          },
        },
      }}
    />
  );
}

export default Field;