import { Layout, LayoutContent, LayoutHeader, ProtectedRoute } from "@/components";
import { PropsWithChildren } from "react";
import { Trans } from "react-i18next";
import { SettingsProvider } from "./SettingsContext";

export const SettingsLayout = ({ children }: PropsWithChildren) => {
  return (
    <ProtectedRoute>
      <SettingsProvider>
        <Layout className='settings-layout'>
          <LayoutHeader />
          <LayoutContent>
            <div className='grid w-full max-w-6xl gap-2 mx-auto'>
              <h1 className='text-2xl font-semibold md:text-3xl'>
                <Trans i18nKey='settings.edit.title' />
              </h1>
            </div>
            {children}
          </LayoutContent>
        </Layout>
      </SettingsProvider>
    </ProtectedRoute>
  );
};