import React, { useState } from "react";
import { FaSearch } from "react-icons/fa";
import { Link, useNavigate } from "react-router-dom";

const Sidebar = ( props) => {
  const navigate = useNavigate();
  const handleClick = (e, {to}) => {
    e.preventDefault();
    props.onClose(false);
    navigate(to);
  }
  const menu = [
    {
      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="px-3 py-5 min-h-screen z-40 bg-blue-900/95 "
      >
        <div>
          <div className="flex w-full">
            <div className="flex border bg-blue-200/20 text-white border-slate-200 rounded-md">
              <form id="search-form" role="search">
                <input
                  className="w-fit py-1 px-2 bg-transparent outline-none"
                  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=" bg-transparent text-white border-l-0 py-2 px-2"
                  type="submit"
                >
                  <FaSearch />
                </button>
              </form>
            </div>
          </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 onClick={(e) => handleClick(e,{to: item.path})} className="w-full flex h-fit" >
                  {item.name}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </div>
  );
};

export default Sidebar;
