import { useAuth } from '../../contexts/AuthContext';
import LoginForm from '../LoginForm';
import RegistrationForm from '../RegistrationForm';
import { useState } from 'react';

const AuthGuard = ({ children }) => {
  const { isAuthenticated, isLoading, login, register } = useAuth();
  const [showLogin, setShowLogin] = useState(true);

  if (isLoading) {
    return (
      <div className="loading-container">
        <div className="loading-spinner">Loading...</div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return (
      <div className="auth-container">
        <div className="auth-content">
          <div className="auth-toggle">
          <button
            className={showLogin ? 'active' : ''}
            onClick={() => setShowLogin(true)}
          >
            Login
          </button>
          <button
            className={!showLogin ? 'active' : ''}
            onClick={() => setShowLogin(false)}
          >
            Register
          </button>
        </div>

        {showLogin ? (
          <LoginForm onLoginSuccess={login} />
        ) : (
          <RegistrationForm onRegistrationSuccess={register} />
        )}

        <div className="auth-switch">
          {showLogin ? (
            <p>
              Don't have an account?{' '}
              <button
                className="link-button"
                onClick={() => setShowLogin(false)}
              >
                Sign up here
              </button>
            </p>
          ) : (
            <p>
              Already have an account?{' '}
              <button
                className="link-button"
                onClick={() => setShowLogin(true)}
              >
                Login here
              </button>
            </p>
          )}
        </div>
        </div>
      </div>
    );
  }

  return children;
};

export default AuthGuard;