import { createContext, useContext, type ReactNode } from 'react'
import {
  d3roNativePalette,
  type D3roNativePalette,
} from './theme'

const NativeThemeContext = createContext<D3roNativePalette | null>(null)

export interface NativeThemeProviderProps {
  palette: D3roNativePalette
  children: ReactNode
}

/**
 * Optional runtime palette boundary for React Native consumers.
 * Components outside a provider retain the legacy palette for compatibility.
 */
export function NativeThemeProvider({
  palette,
  children,
}: NativeThemeProviderProps): React.ReactElement {
  return (
    <NativeThemeContext.Provider value={palette}>
      {children}
    </NativeThemeContext.Provider>
  )
}

export function useNativePalette(): D3roNativePalette {
  return useContext(NativeThemeContext) ?? d3roNativePalette
}