import { Layout, LayoutContent, LayoutHeader, ProtectedRoute } from "@/components";
import { PropsWithChildren } from "react";
import { Outlet, useLocation } from "react-router-dom";
import { QuotesProvider } from "./QuotesContext";

export const QuotesLayout = ({ children }: PropsWithChildren) => {
  const location = useLocation();

  const isEditing = location.pathname.includes("/edit");

  return (
    <ProtectedRoute>
      <QuotesProvider>
        <Layout>
          <LayoutHeader />
          <LayoutContent>
            {" "}
            <div className={`layout ${isEditing ? "editing" : ""}`}>
              <div className='quotes-list'>
                <Outlet />
              </div>
              {isEditing && (
                <div className='quotes-editor'>
                  <Outlet />
                </div>
              )}
            </div>
          </LayoutContent>
        </Layout>
      </QuotesProvider>
    </ProtectedRoute>
  );

  return (
    <QuotesProvider>
      <Layout>
        <LayoutHeader />
        <LayoutContent>{children}</LayoutContent>
      </Layout>
    </QuotesProvider>
  );
};