import React, { useState } from "react";

const Footer = () => {
  const [activeMenu, setActiveMenu] = useState(null);

  const toggleMenu = (menu) => {
    setActiveMenu(activeMenu === menu ? null : menu);
  };

  return (
    <footer className="footer-container fixed-bottom">
      <div className="d-md-none d-flex justify-content-around align-items-center py-2">
        <a href="/" className="footer-icon">
          <i className="bi bi-house-door"></i>
          <span>Home</span>
        </a>

        <div
          className="footer-icon dropdown-wrapper"
          onMouseEnter={() => setActiveMenu("menu")}
          onMouseLeave={() => setActiveMenu(null)}
          onClick={() => toggleMenu("menu")}
        >
          <i className="bi bi-list"></i>
          <span>Menu</span>
          {activeMenu === "menu" && (
            <div className="dropdown-content animate-slide">
              <a href="/about">About Us</a>
              <a href="/contact">Contact</a>
              <a href="/services">Services</a>
              <a href="/feedback">Feedback</a>
            </div>
          )}
        </div>

        <div
          className="footer-icon dropdown-wrapper"
          onMouseEnter={() => setActiveMenu("categories")}
          onMouseLeave={() => setActiveMenu(null)}
          onClick={() => toggleMenu("categories")}
        >
          <i className="bi bi-grid"></i>
          <span>Categories</span>
          {activeMenu === "categories" && (
            <div className="dropdown-content animate-slide">
              <a href="/electronics">Electronics</a>
              <a href="/fashion">Fashion</a>
              <a href="/jobs">Jobs</a>
              <a href="/lost-found">Lost & Found</a>
            </div>
          )}
        </div>

        <a href="/" className="footer-icon">
          <i className="bi bi-search"></i>
          <span>Search</span>
        </a>

        <a href="/" className="footer-icon">
          <i className="bi bi-whatsapp "></i>
          <span>Whatsapp</span>
        </a>
      </div>
    </footer>
  );
};
export default Footer;
