"use client";
import React, { useState } from "react";
import { FaHome, FaNewspaper, FaBars, FaVideo, FaBullhorn, FaThLarge, FaTachometerAlt } from "react-icons/fa";
import Link from "next/link";
import Homeoutline from "@/public/icons/Homeoutline.svg";
import Homefilled from "@/public/icons/Homefilled.svg";
import Latestoutline from "@/public/icons/Latestoutline.svg"
import Latestfilled from "@/public/icons/Latestfilled.svg"
import Videooutline from "@/public/icons/Videooutline.svg"
import Videofilled from "@/public/icons/Videofilled.svg"
import Menuoutline from "@/public/icons/Menuoutline.svg"
import Menufilled from "@/public/icons/Menufilled.svg"
import SideBar from "../sideBar/SideBar";
import Image from "next/image";
import { useRouter } from "next/navigation";

const BottomNavBar = () => {

  const [showSidebar, setShowSidebar] = useState(false)
  const handleSidebar = () => {
    setShowSidebar(!showSidebar);
  };
  const [isHovered, setIsHovered] = useState<string | null>(null);
  const router = useRouter();
  return (
    <>
      {/* Bottom Nav */}
      <div className="fixed  bottom-0 left-0 w-full bg-white dark:bg-gray-900 dark:border-gray-700 z-50 shadow-lg sm:hidden custom-shadow">
        <div className="flex justify-around py-3">
          <Link
            href="/"
            className=""
            type="button"
            aria-label="home"
            onClick={() => {setIsHovered("home"); setShowSidebar(false)}}
          ><div className={`flex flex-col items-center text-[11px] ${isHovered === "home" ? "text-[#941C1D]" : "text-gray-600"}`}>
              <Image src={isHovered === "home" ? Homefilled : Homeoutline} alt="Homeicon" /> Home
            </div>
          </Link>
          <button
            type="button"
            aria-label="annoucement"
            onClick={() => { setIsHovered("latest"); router.push("/latest-news");setShowSidebar(false) }}
          >
            <div className={`flex flex-col items-center  text-[11px] ${isHovered ==="latest" ? "text-[#941C1D]" : "text-gray-600"}`}>
              <Image src={isHovered === "latest" ? Latestfilled : Latestoutline} alt="latesticon" />Latest
            </div>
          </button>
          <button
            type="button"
            aria-label="videos"
            // onClick={handleSidebar}
            onClick={() =>{ setIsHovered("video"); router.push("/videos"); setShowSidebar(false)}}
            
          >
            <div className={`flex flex-col items-center text-[11px] ${isHovered === "video" ? "text-[#941C1D]" : "text-gray-600"}`}>
              <Image src={isHovered === "video" ? Videofilled : Videooutline} alt="videoicon" /> Videos
            </div>
          </button>
          {/* Menu Button */}
          <button
            className=""
            type="button"
            aria-label="menu"
            onClick={() => { setIsHovered("menu");handleSidebar();}}
          > <div className={`flex flex-col items-center text-[11px] ${showSidebar ? "text-[#941C1D]" : "text-gray-600"}`}>
              <Image src={showSidebar ? Menufilled : Menuoutline} alt="menuicon" />Menu
            </div>
          </button>
        </div>
      </div>
      {/* Sidebar */}
      {showSidebar && (
        <SideBar handleSidebar={handleSidebar}
          />
      )}

    </>
  );
};

export default BottomNavBar;