import { Image, View } from "react-native";
import { useGlobal } from "reactn";

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

import { background as backgrounds } from "../assets";
import { Style } from "../styles";

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

  // Web: full-screen background with a centered content area (30% width)
  const [webBackgroundImg] = useGlobal("webBackgroundImg");

  if (isWeb) {
    return (
      <View
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
          minHeight: "100svh",
          position: "relative",
        }}
      >
        {/* Full-viewport background for web */}
        <Image
          source={webBackgroundImg || backgrounds.homeBG}
          resizeMode="cover"
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
          }}
        />

        {/* Centered content column (phone-like width) */}
        <View
          style={{
            width: isWeb ? "60%" : "30%",
            minWidth: 360,
            maxWidth: isWeb ? 800 : 520,
            height: "100svh",
            backgroundColor: "transparent",
          }}
        >
          <View style={{ flex: 1 }}>{children}</View>
        </View>
      </View>
    );
  }

  // Native / non-web: original layout
  const sharedPanelStyle = {};
  return (
    <View
      style={{
        flex: 1,
        flexDirection: "row-reverse",
      }}
    >
      <View
        style={{
          flex: 2,
          position: "relative",
          ...Style.defaultBorder,
          borderTopWidth: 0,
          borderBottomWidth: 0,
          ...sharedPanelStyle,
        }}
      >
        {children}
      </View>
    </View>
  );
};