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

function Field({
  title,
  type,
  dir,
  // isPlaceHolder
}) {
  return (
    <TextField
      label={title}
      dir={dir || "rtl"}
      type={type || "text"}
      className="!w-full !mx-auto !bg-[#FFF]"
      sx={{
        ...styleTextSelectRight,
        // Hide Icon Number
        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
          {
            display: "none",
          },
        "& input[type=number]": {
          MozAppearance: "textfield",
        },
        // "& .MuiFormLabel-root": { top: "-7px !important" },
        "& .MuiInputBase-input": { padding: "12.5px 14px" },
        "& .MuiInputBase-root": { borderRadius: "6px !important" },
        "& .MuiOutlinedInput-notchedOutline": {
          border: "1px solid #E9ECEF !important",
        },
        ".Mui-focused": {
          "& .MuiOutlinedInput-notchedOutline": {
            border: "1px solid #5559CE !important",
            transition: "0.5s all",
          },
        },
      }}
    />
  );
}

export default Field;