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

const LoginPage: React.FC = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleLogin = () => {
    axios.post('/api/login', { email, password })
      .then(() => navigate('/'))
      .catch(error => {
        alert('Login failed');
        console.error(error);
      });
  };

  return (
    <div className="content-container" style={{ width: '300px' }}>
      <h2 className="content-container-title">Login</h2>
      <div className="form-group">
        <input type="email" className="form-control" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
      </div>
      <div className="form-group">
        <input type="password" className="form-control" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
      </div>
      <div className="d-flex justify-content-between">
        <button className="btn btn-outline-custom" onClick={() => navigate('/signup')}>Sign Up</button>
        <button className="btn btn-custom" onClick={handleLogin}>Login</button>
      </div>
    </div>
  );
};

export default LoginPage;