import { TextField } from "@material-ui/core";

type Props = {
  valid: boolean;
  onChangeValid: (valid: boolean) => void;
  showPassword: boolean;
  primaryPassword: string;
  className?: string;
};

const ConfirmPasswordTextField = ({
  valid,
  onChangeValid,
  showPassword,
  primaryPassword,
  className,
}: Props) => {
  return (
    <TextField
      color="secondary"
      margin="normal"
      error={!valid}
      helperText={!valid && "Password does not match"}
      required
      label="Confirm password"
      autoComplete="password"
      name="confirmPassword"
      id="confirmPassword"
      type={showPassword ? "text" : "password"}
      variant="outlined"
      className={className}
      size="small"
      onChange={(e) => {
        onChangeValid(e.target.value === primaryPassword);
      }}
    />
  );
};

export default ConfirmPasswordTextField;