import React, { useState } from "react";
import { FaSearch } from "react-icons/fa";
import { Link } from "react-router-dom";
import About from "../pages/About";
import Contact from "../pages/Contact";
import HelpfulLinks from "../pages/HelpfulLinks";
import Home from "../pages/Home";
import HowToBecomeAChristian from "../pages/HowToBecomeAChristian";
import OnlineGiving from "../pages/OnlineGiving";
import Services from "../pages/Services";
import UpcomingEvents from "../pages/UpcomingEvents";

const Sidebar = () => {
  const [menu, setMenu] = useState([
    {
      name: "Home",
      path: "/",
    },
    {
      name: "Upcoming Events",
      path: "/events",
    },
    {
      name: "Services",
      path: "/services",
    },{
        name: "About",
        path: "/about",
    },
    {
        name: "Church Staff",
        path: "/church-staff",
    }, {   
        name: "Contact",
        path: "/contact",
    },  {
        name: "How to Become a Christian",
        path: "/become-a-christian",
    },  {
        name: "Online Giving",
        path: "/tithing",
    }, {
        name: "Helpful Links",
        path: "/links",
    }, 
    //  {
    //     name: "Rocks Cry Out Youth Ministry",
    //     path: "/rocks-cry-out-youth-ministry", 
    // },  
  ]);
  return (
    <div className="">
        
      <div
        id="sidebar"
        className="absolute px-3 py-5 z-40 bg-blue-900/95 w-full sm:w-fit min-h-screen h-[100vh] overflow-y-auto"
      >
        <div>
          <div className="flex w-full">
            <form id="search-form" role="search">
              <input
                className="border bg-blue-200/20 text-white border-slate-200 py-1 px-2 rounded-l-md border-r-0"
                id="q"
                aria-label="Search contacts"
                placeholder="Search"
                type="search"
                name="q"
              />
              <div id="search-spinner" aria-hidden hidden={true} />
              <div className="sr-only" aria-live="polite"></div>
            </form>
            <form method="post">
              <button
                className="border border-slate-200 rounded-r-md bg-blue-200/20 text-white border-l-0 py-2 px-2"
                type="submit"
              >
                <FaSearch />
              </button>
            </form>
          </div>
        </div>
        <nav>
          <ul className="text-white mt-3">
            {menu.map((item) => (
              <li className="py-1 hover:border-b border-b-gray-200 " key={item.name}>
                <Link className="w-full" to={item.path}>{item.name}</Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </div>
  );
};

export default Sidebar;
