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

function Field({ title, handleClick }) {
  return (
    <div className="relative">
      <TextField
        label={title}
        className="!w-full !mx-auto !bg-[#FFF]"
        sx={{
          borderRadius: "8px !important",
          "& .MuiFormLabel-root": {
            transform: "translate(16px, 50%) scale(1) !important",
          },
          "& .MuiInputLabel-shrink": {
            transform: "translate(14px, -9px) scale(0.75) !important",
          },
          "& .MuiInputBase-input": { padding: "12.5px 14px" },
          "& .MuiInputBase-root": { borderRadius: "8px !important" },
          "& .MuiOutlinedInput-notchedOutline": {
            border: "1px solid #E9ECEF !important",
          },
          ".Mui-focused": {
            "& .MuiOutlinedInput-notchedOutline": {
              border: "1px solid #0FA1B3 !important",
              transition: "0.5s all",
            },
          },
        }}
      />
      <span
        className="absolute cursor-pointer left-0 top-0 w-full h-full"
        onClick={handleClick}
      ></span>
    </div>
  );
}

export default Field;