import { posts } from "./lib/post";
import { BlogPostList } from "./components/BlogPostList";
import { Link } from "react-router";
import { useState } from "react";

export function App() {
  const [searchBarDisplay, displaySearchBar] = useState(false);
  return (
    <>
      <title>Posts</title>
      <div className="w-screen p-5 flex flex-col items-center gap-10">
        <nav className="flex justify-between items-center w-full sticky top-0 max-w-3xl">
          <h1 className="text-3xl font-bold text-left">Blog App</h1>
          {searchBarDisplay ? (
            <>
              <input
                type="text"
                placeholder="Search..."
                className="border border-gray-300 rounded px-2 py-1"
                onChange={(_e) => {
                  // Implement search functionality here
                }}
              />
              <button
                className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center"
                onClick={() => displaySearchBar(false)}
              >
                Close
              </button>
            </>
          ) : (
            <button
              className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center"
              onClick={() => displaySearchBar(true)}
            >
              Search
            </button>
          )}
          <div className="flex w-full justify-end items-center">
            <Link to="/post" className="w-1/3">
              <div className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center">
                New Post
              </div>
            </Link>
          </div>
        </nav>
        <div className="flex flex-col gap-4 md:grid md:grid-cols-3 items-center justify-between w-full">
          <div className="flex w-full justify-end items-center">
            <h1 className="text-5xl font-bold text-center">Posts</h1>
            <Link to="/post" className="w-1/3">
              <div className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center">
                New Post
              </div>
            </Link>
          </div>
        </div>
        <BlogPostList posts={posts} />
      </div>
    </>
  );
}
