import { useState } from 'react';

export const LoginForm = ({ onLogin }) => {
  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');

  const handleLoginChange = (event) => {
    setLogin(event.target.value);
  };

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

  const handleSubmit = (event) => {
    event.preventDefault();
    onLogin(login, password);
  };

  const isFormValid = login.trim().length > 0 && password.trim().length > 0;

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="login-input">Login:</label>
        <input type="text" id="login-input" value={login} onChange={handleLoginChange} />
      </div>
      <div>
        <label htmlFor="password-input">Password:</label>
        <input
          type="password"
          id="password-input"
          value={password}
          onChange={handlePasswordChange}
        />
      </div>
      <button type="submit" disabled={!isFormValid}>
        Login
      </button>
    </form>
  );
};
