import { BoxTokens, useResolveBoxTokens } from "design-system/hooks/useResolveBoxTokens";
import { RemoveStyle } from "design-system/tools/useStyle";
import React, { forwardRef, useContext } from "react";
import { SafeAreaViewProps } from "react-native-safe-area-context";
import { BackgroundContext } from "design-system/hooks/useBackgroundColor";
import { View } from "react-native";

export type BoxProps = BoxTokens & RemoveStyle<SafeAreaViewProps>;
export const Box = forwardRef<View, BoxProps>(({ children, ...props }, ref) => {
  const { tokenStyles, paddingValues, style, ...rest } = useResolveBoxTokens(props);
  const color = useContext(BackgroundContext);
  return (
    <BackgroundContext.Provider value={tokenStyles.backgroundColor ?? color}>
      <View ref={ref} style={[tokenStyles, paddingValues, style]} {...rest}>
        {children}
      </View>
    </BackgroundContext.Provider>
  );
});