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


const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate(); // Crear navigate para redirigir

  const handleLogin = async (e) => {
    e.preventDefault();
    const auth = `Basic ${btoa(`${username}:${password}`)}`;

    try {
      const response = await axios.get('http://localhost:8080/clientes', {
        headers: {
          'Authorization': auth,
        },
      });

      if (response.status === 200) {
        localStorage.setItem('authToken', auth); // Guarda el token en localStorage
        navigate('/clientes'); // Redirige a la ruta deseada
      }
    } catch (err) {
      setError('Login failed, please check your credentials');
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      {error && <p>{error}</p>}
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;