import { ContentPadding } from "@/constants/theme";
import { forwardRef } from "react";
import {
  Platform,
  ScrollView,
  ScrollViewProps,
  StyleSheet,
} from "react-native";

interface ContentProps extends ScrollViewProps {
  children?: React.ReactNode;
}

const Content = forwardRef<ScrollView, ContentProps>(
  ({ children, style, ...rest }, ref) => {
    return (
      <>
        {Platform.OS === "web" ? (
          <ScrollView
            ref={ref}
            style={[styles.content, style]}
            {...rest}
          >
            {children}
          </ScrollView>
        ) : (
          <ScrollView
            ref={ref}
            contentContainerStyle={[styles.content, style]}
            {...rest}
          >
            {children}
          </ScrollView>
        )}
      </>
    );
  }
);

Content.displayName = "Content";

const styles = StyleSheet.create({
  content: {
    paddingHorizontal: ContentPadding,
    paddingTop: ContentPadding + 30,
    paddingBottom: ContentPadding + 20,
  },
});

export default Content;