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

const styles = makeStyles({
  root: {
    margin: "6px",
    textDecorationColor: "#0e8496",
  },
  input: {
    color: "#0e8496",
  },
});

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#0e8496",
    },
  },
});

export default function CustomTextInput(props) {
  const classes = styles();
  return (
    <ThemeProvider theme={theme}>
      <TextField
        id={props.id}
        className={classes.root}
        label={props.label}
        type="search"
        variant="outlined"
        InputProps={{ className: classes.input }}
      ></TextField>
    </ThemeProvider>
  );
}