import React from 'react';
import { Box } from '@mui/material';
import SidePanel from '../components/SidePanel';
import LoginForm from '../components/LoginForm';

export default function LoginPage() {
  return (
    <Box bgcolor={"background.default"} color={"text.primary"}>
      {/* SidePanel ثابت */}
      <Box
        sx={{
          position: 'fixed',
          top: 0,
          left: 0,
          height: '100vh',
          width: { xs: '0px', sm: '50%' },  // الـ SidePanel سيكون 50% في الشاشات الكبيرة
          display: { sx: 'none', md: 'block' }, // إخفاء على الشاشات الصغيرة
          zIndex: 10,
        }}
      >
        <SidePanel />
      </Box>

      {/* LoginForm مع margin-left لتجنب تغطيته بـ SidePanel */}
      <Box
        sx={{
          marginLeft: { xs: 0, sm: '50%' },  // تأكد من وجود مساحة لـ SidePanel في الشاشات الكبيرة
          width: { xs: '100%', sm: '50%' },  // الـ LoginForm سيأخذ 100% في الشاشات الصغيرة و50% في الكبيرة
        }}
      >
        <LoginForm />
      </Box>
    </Box>
  );
}