import React, { useEffect, useState } from "react"; <br/>
import PipePage from "./PipePage.jsx"; <br/>
import CTS from "ctsroute"; <br/>

export default function PageMainTest() {
var route = [
    {
    id: 1,
    path: "/page_1",
    page: <div>Page 1</div>,
    },

    {
    id: 1,
    path: "/page_2",
    page: <div>Page 2</div>,
    },
];

return (
    <div>
    <CTS
        main_page={<div>Main Page</div>}
        error_page={<div>Error Page</div>}
        data={route}
    />
    </div>
);

}

// Route Page
import React from "react";
import "./Main.css";
import "bootstrap/dist/css/bootstrap.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function Main(prop) {
const error_page = prop.prop.error_page;
const main_page = prop.prop.main_page;
const data = prop.prop.data;

function error_Page() {
    return (
    <div style={{ textAlign: "center", color: "lightgray" }}>
        <h5>
        <br />
        Error 404! <br /> Page Not Found
        </h5>
    </div>
    );
}
return (
    <div>
    <BrowserRouter>
        <Routes>
        <Route path="/" element={main_page} />

        {data.map((row, i) => {
            return <Route path={row.path} element={row.page} />;
        })}

        <Route
            path="*"
            element={
            error_page == null || error_page == undefined
                ? error_Page()
                : error_page
            }
        />
        </Routes>
    </BrowserRouter>
    </div>
);
}

export default Main;