import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router";
import "./index.css";
import { App } from "./App.tsx";
import { BlogPostDetail, PostLayout } from "./components/BlogPostDetail.tsx";
import { NewPostLayout } from "./components/BlogPostForm.tsx";
import { posts } from "./lib/post.ts";

const deletePost = (postId: number) => {
  const index = posts.findIndex((post) => post.id === postId);
  if (index !== -1) {
    posts.splice(index, 1);
  }
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route index element={<App />} />
        <Route path="entries" element={<PostLayout />}>
          <Route
            path=":postId"
            element={<BlogPostDetail deletePost={deletePost} />}
          />
        </Route>
        <Route path="post" element={<NewPostLayout />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>,
);