import React from "react";
import { useLocation, Route, Routes } from "react-router-dom";
// Outlet allows nested routes to render their elements
import { Outlet } from "react-router-dom";

// Import routes configuration
import routes from "routes.js";

/**
 * Auth Component - Main layout wrapper for authentication pages (login, register, etc.)
 * Provides a clean, full-width container for auth forms with modern split layout design
 */
const Auth = (props) => {
  // Reference to the main content div for scrolling control
  const mainContent = React.useRef(null);
  // Current location from react-router
  const location = useLocation();

  /**
   * Effect to scroll to top when location/route changes
   * This ensures the user always starts at the top of the page when navigating
   */
  React.useEffect(() => {
    document.documentElement.scrollTop = 0;
    document.scrollingElement.scrollTop = 0;
    mainContent.current.scrollTop = 0;
  }, [location]);

  /**
   * Helper function to generate Route components from routes configuration
   * Only generates routes that have "/auth" as their layout
   * @param {Array} routes - Array of route configuration objects
   * @returns {Array} - Array of Route components
   */
  const getRoutes = (routes) => {
    return routes.map((prop, key) => {
      if (prop.layout === "/auth") {
        return (
          <Route path={prop.path} element={prop.component} key={key} exact />
        );
      } else {
        return null;
      }
    });
  };

  return (
    <div 
      className="auth-page"
      ref={mainContent}
    >
      {/* Outlet renders the child route components (Login, Register, etc.) */}
      <Outlet />
    </div>
  );
};

export default Auth;
