import React, { useEffect, useState } from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import HomePage from './pages/HomePage'
import TagPage from './pages/TagPage'
import TopNav from './components/TopNav'
import TagSidebar from './components/TagSidebar'
import PostPage from './pages/PostPage'
import PostDetailPage from './pages/PostDetailPage'

type Tag = { id:        number
             name:      string
             category:  string }

type Post = { id:         number
              url:        string
              title:      string
              thumbnail:  string
              tags:       Tag[] }


const App = () => {
  const [posts, setPosts] = useState<Post[]> ([])

  useEffect (() => {
    alert ('このサイトはまだ作りかけです!!!!\n出てけ!!!!!!!!!!!!!!!!!!!!')
  }, [])

  return (
      <Router>
        <div className="flex flex-col h-screen w-screen">
          <TopNav />
          <div className="flex flex-1">
            <TagSidebar posts={posts} setPosts={setPosts} />
            <main className="flex-1 overflow-y-auto p-4">
              <Routes>
                <Route path="/posts/:id" element={<PostDetailPage posts={posts} setPosts={setPosts} />} />
                <Route path="/tags/:tag" element={<TagPage />} />
                <Route path="*" element={<PostPage posts={posts} setPosts={setPosts} />} />
              </Routes>
            </main>
          </div>
        </div>
      </Router>)
}


export default App