import { useState, useEffect } from 'react';

export const PasswordConfirm = ({ min }) => {
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [valid, setValid] = useState(false);

  useEffect(() => {
    setValid(password.length >= min && password === confirmPassword);
  }, [password, confirmPassword, min]);

  const handleChangePassword = (event) => {
    setPassword(event.target.value);
  };

  const handleChangeConfirmPassword = (event) => {
    setConfirmPassword(event.target.value);
  };

  return (
    <div>
      <label>Password:</label>
      <input type="password" value={password} onChange={handleChangePassword} />
      <br />
      <label>Confirm password:</label>
      <input type="password" value={confirmPassword} onChange={handleChangeConfirmPassword} />
      <br />
      <button disabled={!valid}>Submit</button>
    </div>
  );
};
