import { useI18nSync } from '@/hooks/use-i18n-sync';
import { userThemes, type UserThemeName } from '@/themes';
import { SharedData } from '@/types';
import { setThemeScope } from '@/utils/theme-manager';
import { Head, usePage } from '@inertiajs/react';
import { useLayoutEffect, type ReactNode } from 'react';

interface AppLayoutProps {
  children: ReactNode;
  title?: string;
}

export default function AppLayout({ children, title }: AppLayoutProps) {
  useI18nSync();
  const { branding } = usePage<SharedData>().props;
  const rawVariant = branding?.site_theme;
  const variant: UserThemeName =
    rawVariant in userThemes ? (rawVariant as UserThemeName) : 'default';

  useLayoutEffect(() => {
    setThemeScope('user', variant);
  }, [variant]);

  const ThemeLayout = userThemes[variant]?.layout ?? userThemes.default.layout;

  return (
    <>
      <Head title={title} />
      <ThemeLayout>{children}</ThemeLayout>
    </>
  );
}