import { ThemeProvider } from '@react-navigation/native';
import React, { type PropsWithChildren } from 'react';

import { useAppSettingsContext } from '@/core/app-settings-context';
import { useColorScheme } from '@/hooks/use-color-scheme';
import { getNavTheme } from '@/lib/theme';

/**
 * Wraps React Navigation ThemeProvider with theme resolved from
 * design-tokens (themeName + colorScheme).
 * Must be used inside AppSettingsProvider.
 */
export function NavigationThemeProvider({ children }: PropsWithChildren) {
  const { themeName } = useAppSettingsContext();
  const { colorScheme } = useColorScheme();
  const resolved = colorScheme === 'dark' ? 'dark' : 'light';
  const theme = getNavTheme(themeName, resolved);

  return <ThemeProvider value={theme}>{children}</ThemeProvider>;
}