import {ReactNode} from 'react';
import {ScrollView, StyleProp, View, ViewStyle} from 'react-native';

import { useSelector } from 'react-redux';
import {RootState, store} from '@redux/store';


interface MyScreenContainerProps {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
  scrollView?: boolean;
}

export function MyScreenContainer({
  children,
  style,
  scrollView,
}: MyScreenContainerProps) {
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.themeColors,
  );

  const containerStyle = {
    backgroundColor: currentTheme.backgroundDark400,
    flex: 1,
    paddingLeft: 20,
    paddingRight: 20,
  };

  if (scrollView) {
    return (
      <ScrollView style={containerStyle}>
        <View style={[style, !scrollView && containerStyle]}>{children}</View>
      </ScrollView>
    );
  }

  return <View style={[style, !scrollView && containerStyle]}>{children}</View>;
}