import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function Login(props) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate();

  function handleUsernameChange(event) {
    setUsername(event.target.value);
  }

  function handlePasswordChange(event) {
    setPassword(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();

    // Here you can add your login authentication logic
    if (username === 'user' && password === 'password') {
      // If the login is successful, redirect to the home page
        navigate("/home")
    } else {
      // If the login fails, display an error message
      setError('Invalid username or password');
    }
  }

  return (
    <div className="App">
      <div>
      {error && <p>{error}</p>}
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Username:
          <input type="text" value={username} onChange={handleUsernameChange} required />
        </label>
        <br />
        <label>
          Password:
          <input type="password" value={password} onChange={handlePasswordChange} required />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
      </div>
    </div>
  );
}

export default Login;