import { useState } from "react";
import styles from "./Auth.module.css";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

export const Auth = ({ LoginComponent, SignUpComponent, onLoginSubmit, onSignUpSubmit }) => {
  const [isLoginMode, setIsLoginMode] = useState(true);

  return (
    <div className={styles.container}>
      <div className={styles.formCard}>
        <h2 className={styles.header}>{isLoginMode ? "Login Form" : "SignUp Form"}</h2>

        <div className={styles.tabContainer}>
          <button
            className={`${styles.tabButton} ${isLoginMode ? styles.activeTab : ""}`}
            onClick={() => setIsLoginMode(true)}
          >
            Login
          </button>
          <button
            className={`${styles.tabButton} ${!isLoginMode ? styles.activeTab : ""}`}
            onClick={() => setIsLoginMode(false)}
          >
            Signup
          </button>
        </div>

        {isLoginMode ? (
          <div className={styles.login}>
            <LoginComponent onLogin={onLoginSubmit} />
            <a href="#" className={styles.forgotLink}>Forgot password?</a>
          </div>
        ) : (
          <div className={styles.signup}>
            <SignUpComponent onSubmit={() => {
              setIsLoginMode(true);
              if (onSignUpSubmit) onSignUpSubmit();
            }} />
          </div>
        )}

        <div className={styles.signupPrompt}>
          {isLoginMode ? "Not a member?" : "Already a member?"}{" "}
          <a href="#" onClick={() => setIsLoginMode(!isLoginMode)}>
            {isLoginMode ? "Signup now" : "Login"}
          </a>
        </div>
      </div>

      <ToastContainer position="top-right" autoClose={3000} />
    </div>
  );
};
