import { View } from "react-native";
import { Motion } from "@legendapp/motion";

import useLayoutType from "../hooks/useLayoutType";

import Home from "../screens/Home";

import { Style } from "../styles";

export default ({ currentUID = null, children }) => {
  const { isWeb = false } = useLayoutType();

  const sharedPanelStyle = {
    ...(isWeb ? {} : {}),
  };

  const mainContainer = {
    flex: 1,
    ...(isWeb ? { maxHeight: "100svh" } : {}),
  };

  return (
    <View
      style={{
        ...mainContainer,
        flexDirection: "row-reverse",
      }}
    >
      <View
        style={{
          flex: 2,
          position: "relative",
          ...Style.defaultBorder,
          borderTopWidth: 0,
          borderBottomWidth: 0,
          ...sharedPanelStyle,
        }}
      >
        {children}
      </View>
    </View>
  );
};
