import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import LoginForm from './components/LoginForm';
import { Box, Typography } from '@mui/material';

const RegisterPage: React.FC = () => (
  <Box sx={{ p: 4 }}>
    <Typography variant="h4">Register Page</Typography>
    <Typography>Registration form will go here.</Typography>
  </Box>
);

const ForgotPasswordPage: React.FC = () => (
  <Box sx={{ p: 4 }}>
    <Typography variant="h4">Forgot Password</Typography>
    <Typography>Forgot password form will go here.</Typography>
  </Box>
);

const HomePage: React.FC = () => (
  <Box sx={{ p: 4 }}>
    <Typography variant="h4">Welcome to the App</Typography>
    <Typography>Use the navigation to login, register, or reset password.</Typography>
  </Box>
);

const App: React.FC = () => {
  return (
    <Routes>
      <Route path="/" element={<Navigate replace to="/login" />} />
      <Route path="/login" element={<LoginForm />} />
      <Route path="/register" element={<RegisterPage />} />
      <Route path="/forgot-password" element={<ForgotPasswordPage />} />
      <Route path="*" element={<HomePage />} />
    </Routes>
  );
};

export default App;