import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Header from '../Header';
import { useLogic } from './Logic';


const Login = () => {
    const navigate = useNavigate();
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);
    
    const { login } = useLogic(setError, setLoading);

    const handleRegisterClick = () => {
        navigate('/registration'); // Переход к регистрации
    };
    
    const handleLogin = async (e) => {
        e.preventDefault();
        await login(username, password);
    };

    return (
        <>
            <Header />
            <div className="login-page">
                <h2>Вход в систему</h2>
                {
                    error && <div className="error">{error}</div>
                }
                <form onSubmit={handleLogin}>
                    <div>
                        <label>Логин:</label>
                        <input
                            type="text"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            required
                        />
                    </div>
                    <div>
                        <label>Пароль:</label>
                        <input
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            required
                        />
                    </div>
                    <button type="submit" disabled={loading}>
                        {loading ? 'Вход...' : 'Войти'}
                    </button>
                </form>
                <button onClick={handleRegisterClick}>
                    Зарегистрироваться
                </button>
            </div>
        </>
    );
};

export default Login;