import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import SignIn from './pages/auth/SignIn';
import SignUp from './pages/auth/Signup';
import { ProtectedRoute } from './ProtectedRoute';
import NotFound from './pages/blank/NotFound';

// Dashboard
import Home from './pages/home/Home';
import Blank from './pages/blank/Blank';

// Master
import IndexDevice from './pages/master/device/IndexDevice';
import SvgTest from './pages/home/SvgTest';

const App = () => {
    return (
        <BrowserRouter>
            <Routes>
                {/* Public Routes */}
                <Route path="/" element={<Navigate to="/signin" replace />} />
                <Route path="/signin" element={<SignIn />} />
                <Route path="/signup" element={<SignUp />} />
                <Route path="/svg" element={<SvgTest />} />

                {/* Protected Routes */}
                <Route path="/dashboard" element={<ProtectedRoute />}>
                    <Route path="home" element={<Home />} />
                    <Route path="blank" element={<Blank />} />
                </Route>

                <Route path="/master" element={<ProtectedRoute />}>
                    <Route path="device" element={<IndexDevice />} />
                </Route>

                {/* Catch-all */}
                <Route path="*" element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    );
};

export default App;