import { View, Image } from 'react-native';
import { useGlobal } from 'reactn';
import { Motion } from '@legendapp/motion';

import useLayoutType from '../hooks/useLayoutType';

import Home from '../screens/Home';

import { Palette, Style } from '../styles';
import { background as backgrounds } from '../assets';

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: '30%',
            minWidth: 360,
            maxWidth: 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>
  );
};
