import React, { useEffect } from "react";
import { Outlet } from "react-router";
import { useAuth } from "../contexts/AuthContext";

const ProtectedLayout: React.FC = () => {
  const { user, loading, openAuthModal } = useAuth();

  useEffect(() => {
    if (!loading && !user) {
      openAuthModal("login");
    }
  }, [loading, user, openAuthModal]);

  if (loading) {
    return (
      <div
        className="d-flex justify-content-center align-items-center"
        style={{ minHeight: "80vh" }}
      >
        <div className="spinner-border text-primary" role="status">
          <span className="visually-hidden">Loading...</span>
        </div>
      </div>
    );
  }

  if (!user) {
    return (
      <div
        className="d-flex justify-content-center align-items-center"
        style={{ minHeight: "80vh" }}
      >
        <div className="text-center">
          <i className="bi bi-lock display-1 text-muted mb-3"></i>
          <h3>Please log in or sign up to access this page.</h3>
        </div>
      </div>
    );
  }

  return <Outlet />;
};

export default ProtectedLayout;
