import { View, Text, ViewProps } from "react-native-ui-lib";
import React, { ReactNode } from "react";
import { Dimensions, StyleSheet } from "react-native";
import UsersList from "./UsersList";
import { ScrollView } from "react-native-gesture-handler";

interface TabletContainerProps extends ViewProps {
  children: ReactNode;
}

const { width, height } = Dimensions.get("window");

const TabletContainer: React.FC<TabletContainerProps> = ({
  children,
  ...props
}) => {
  return (
    <View style={styles.container}>
      <View row>
        <View style={styles.calendarContainer}>{children}</View>
        <View style={styles.profilesContainer}>
          <ScrollView>
            <UsersList />
          </ScrollView>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    flex: 1,
    borderTopColor: "#a9a9a9",
    borderTopWidth: 1,
  },
  calendarContainer: {
    backgroundColor: "white",
    height: height,
    width: width * 0.89,
  },
  profilesContainer: {
    width: width * 0.11,
    height: height,
    borderLeftWidth: 1,
    borderLeftColor: "#a9a9a9",
    backgroundColor: "white",
  },
});

export default TabletContainer;