import React from "react";
import TextFieldMUI from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const TextField = ({ className, light, ...props }) => {
  const classes = useStyles();
  return (
    <TextFieldMUI
      className={`${classes.input} ${className} ${light ? "light" : ""}`}
      fullWidth
      margin="dense"
      {...props}
    />
  );
};

const useStyles = makeStyles((theme) => ({
  input: {
    "&.light .MuiFormLabel-root": {
      color: "white",
    },
    "&.light .MuiInputBase-input": { color: "white" },
    "&.light .MuiInput-underline::before": {
      borderColor: "white",
    },
    "&.light .MuiInput-underline:hover:not(.Mui-disabled)::before": {
      borderColor: "white",
    },
    "&.light .MuiInput-underline::after": {
      transform: "scaleX(0)",
    },
  },
}));

export default TextField;