import { ClerkProvider } from '@clerk/nextjs';
import { setRequestLocale } from 'next-intl/server';

export default async function AuthLayout(props: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const { locale } = await props.params;
  setRequestLocale(locale);
  let signInUrl = '/sign-in';
  let signUpUrl = '/sign-up';
  let dashboardUrl = '/dashboard';
  let afterSignOutUrl = '/';

  signInUrl = `/${signInUrl}`;
  signUpUrl = `/${signUpUrl}`;
  dashboardUrl = `/`;
  afterSignOutUrl = `/${afterSignOutUrl}`;

  return (
    <ClerkProvider
      localization={{
        signIn: {
          start: {
            title: 'Sign In',
          },
        },
        signUp: {
          start: {
            title: 'Sign Up',
          },
        },
      }}
      signInUrl={signInUrl}
      signUpUrl={signUpUrl}
      signInFallbackRedirectUrl={dashboardUrl}
      signUpFallbackRedirectUrl={dashboardUrl}
      afterSignOutUrl={afterSignOutUrl}
    >
      <div className="mx-auto flex w-full items-center justify-center pt-32">
        {props.children}
      </div>
    </ClerkProvider>
  );
}