import React from 'react';
import { RouterProvider, createBrowserRouter, Navigate } from "react-router-dom";
import PageTemplate from "./components/PageTemplate";
import HomePage from "./components/Homepage";
import NoPage from "./components/NoPage";
import PostPage from "./components/PostPage";
import PostDetailPage from "./components/PostDetailPage";
import PostOwnerPage from "./components/PostOwnerPage";

const Myrouter = createBrowserRouter([
    {
        path: "/",
        element: <PageTemplate />
    },
    {
        path: "",
        element: <HomePage />
    },
    {
        path: "posts/:postId",
        element: <PostPage />,
        children: [
            {
                index: true,
                element: <Navigate to="detail" replace />
            },
            {
                path: "detail",
                element: <PostDetailPage />
            },
            {
                path: "owner/:userId",
                element: <PostOwnerPage />
            },
            {
                path: "*",
                element: <NoPage />
            }
        ]
    },
    {
        path: "*",
        element: <NoPage />
    },
]);

export default function App() {
    return (
        <div className="App">
            <RouterProvider router={Myrouter}></RouterProvider>
        </div>
    );
}