import React, { useState } from 'react';
import axios from 'axios';

const AuthForm = ({ type = "login" }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [msg, setMsg] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const endpoint = type === 'signup' ? '/signup' : '/login';
      const res = await axios.post(`https://your-hf-space.hf.space${endpoint}`, {
        username,
        password,
      });
      if (type === 'login') {
        localStorage.setItem('token', res.data.token);
        window.location.href = "/search";
      } else {
        setMsg("Account created! You can now login.");
      }
    } catch (err) {
      setMsg(err.response?.data?.message || 'Something went wrong');
    }
  };

  return (
    <div className="max-w-md mx-auto p-6 bg-white rounded-2xl shadow-lg">
      <h2 className="text-2xl font-bold mb-4">{type === 'signup' ? 'Sign Up' : 'Login'}</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <input type="text" placeholder="Username"
          className="w-full px-4 py-2 border rounded-lg"
          value={username} onChange={e => setUsername(e.target.value)} required />
        <input type="password" placeholder="Password"
          className="w-full px-4 py-2 border rounded-lg"
          value={password} onChange={e => setPassword(e.target.value)} required />
        <button className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">
          {type === 'signup' ? 'Sign Up' : 'Login'}
        </button>
        {msg && <p className="text-red-500">{msg}</p>}
      </form>
    </div>
  );
};

export default AuthForm;