import React, { useState } from "react";
import {
  Box,
  Button,
  TextField,
  Typography,
  Link,
  Alert,
  Stack,
  Container,
} from "@mui/material";

interface LoginScreenProps {
  onLogin: () => void;
}

const LoginScreen: React.FC<LoginScreenProps> = ({ onLogin }) => {
  const [username, setUsername] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [error, setError] = useState<string>("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (username === "admin" && password === "1234") {
      setError("");
      onLogin();
    } else {
      setError("Incorrect username or password");
    }
  };

  return (
    <Container maxWidth="xs">
      <Box
        sx={{
          mt: 8,
          p: 4,
          boxShadow: 3,
          borderRadius: 2,
          bgcolor: "background.paper",
          direction: "ltr", 
          textAlign: "left",
        }}
      >
        <Typography variant="h5" component="h2" gutterBottom>
          Login to your account
        </Typography>

        <Box component="form" onSubmit={handleSubmit} noValidate>
          <TextField
            label="Username"
            variant="outlined"
            fullWidth
            margin="normal"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            required
            autoComplete="username"
            dir="ltr"
          />
          <TextField
            label="Password"
            variant="outlined"
            fullWidth
            margin="normal"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            autoComplete="current-password"
            dir="ltr"
          />
          {error && (
            <Alert severity="error" sx={{ mt: 2, mb: 1 }}>
              {error}
            </Alert>
          )}

          <Button
            variant="contained"
            color="primary"
            fullWidth
            type="submit"
            sx={{ mt: 2, mb: 1 }}
          >
            Login
          </Button>
        </Box>

        <Stack
          direction="row"
          justifyContent="space-between"
          sx={{ mt: 2 }}
          spacing={2}
        >
          <Link href="#" underline="hover" variant="body2" dir="ltr">
            Forgot password?
          </Link>
          <Link href="#" underline="hover" variant="body2" dir="ltr">
            Sign up for a new account
          </Link>
        </Stack>
      </Box>
    </Container>
  );
};

export default LoginScreen;
וגם - 
import React, { useState } from "react";
import LoginScreen from './components/screen-login/LoginScreen';
import { Box, Button, Container, Typography } from "@mui/material";

const App: React.FC = () => {
  const [loggedIn, setLoggedIn] = useState<boolean>(false);

const handleLogin = React.useCallback(() => {
  setLoggedIn(true);
}, []);

  const handleLogout = () => setLoggedIn(false);

  return (
    <Container maxWidth="sm" sx={{ mt: 8, textAlign: "center", direction: "ltr" }}>
      {loggedIn ? (
        <Box>
          <Typography variant="h4" gutterBottom>
            Welcome!
          </Typography>
          <Button variant="contained" onClick={handleLogout}>
            Logout
          </Button>
        </Box>
      ) : (
       <LoginScreen onLogin={handleLogin} />
      )}
    </Container>
  );
};

export default App;
 זה הקודים של מסך ה לוגין!  איפה אני מצרפת את הקודים שהבאת?