import React from "react";
import { View, Text, ScrollView, useWindowDimensions } from "react-native";

export const LandscapeTrainInfo = (props) => {
  const { leftContent, topStickyContent, children, scrollHandlers } = props;
  const { height, width } = useWindowDimensions();
  return (
    <View
      style={{
        flexDirection: "row",
        backgroundColor: "blue",
        width: width,
        height: (height / 100) * 70,
        marginBottom: 50,
      }}
    >
      <View
        style={{
          flexDirection: "column",
          height: (height / 100) * 70,
          width: width / 2,
        }}
      >
        <Text>{width / 2}</Text>
        {leftContent}
      </View>
      <ScrollView
        {...scrollHandlers}
        style={{
          width: width / 2,
          height: "auto",
        }}
        stickyHeaderIndices={[1]}
        scrollEventThrottle={16}
        onScroll={(d) => {
          console.log(d.nativeEvent.contentOffset.y);
        }}
      >
        <View style={{ height: 0 }} />
        <View style={{ flexDirection: "column" }} index={1}>
          {topStickyContent}
        </View>
        {children}
      </ScrollView>
    </View>
  );
};