Vitron-Front/app/components/home/HomePageTopBar.tsx

import { useState, useEffect, useMemo, memo, useCallback } from "react";
import logo from "../../assets/logo/SVG-07.svg";

const HomePageTopBar = memo(() => {
  const [activeTab, setActiveTab] = useState(0);
  const tabs = useMemo(() => ["تخفیف‌ها", "برترین فروشگاه‌ها", "برای شما"], []);

  // Scroll to section when tab is clicked
  const scrollToSection = useCallback((sectionId: string) => {
    const section = document.getElementById(sectionId);
    if (section) {
      section.scrollIntoView({ behavior: "smooth" });
    }
  }, []);

  // Update active tab based on scroll position with throttling
  useEffect(() => {
    let ticking = false;
    const handleScroll = () => {
      if (!ticking) {
        window.requestAnimationFrame(() => {
          const section1 = document.getElementById("section1");
          const section2 = document.getElementById("section2");
          const section3 = document.getElementById("section3");

          if (section1 && section2 && section3) {
            const scrollPosition = window.scrollY;

            if (scrollPosition >= section3.offsetTop - 100) {
              setActiveTab(2);
            } else if (scrollPosition >= section2.offsetTop - 100) {
              setActiveTab(1);
            } else {
              setActiveTab(0);
            }
          }
          ticking = false;
        });
        ticking = true;
      }
    };

    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const scrollToTop = useCallback(() => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, []);

  const handleTabClick = useCallback(
    (index: number) => {
      setActiveTab(index);
      scrollToSection(`section${index + 1}`);
    },
    [scrollToSection]
  );

  return (
    <div className="flex gap-2 flex-row h-[calc(48px_+_env(safe-area-inset-top))] pt-[env(safe-area-inset-top)] w-full bg-WHITE items-center px-4 sticky top-0 z-30">
      <div className="flex relative items-center gap-2 justify-center w-full">
        <div
          className="absolute right-0"
          onClick={() => scrollToTop()}
          role="button"
          tabIndex={0}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === " ") {
              scrollToTop();
            }
          }}
        >
          <img src={logo} className="w-8 h-8 object-contain" alt="logo" />
        </div>
        <div className="flex gap-4 justify-center">
          {tabs.map((tab, index) => (
            <div
              key={index}
              onClick={() => handleTabClick(index)}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") {
                  handleTabClick(index);
                }
              }}
              role="button"
              tabIndex={index}
              className="flex items-center"
            >
              <p
                className={`text-B12 border-b-[2px] transition-all duration-300 ease-in-out py-1 ${
                  index === activeTab
                    ? "text-BLACK border-BLACK font-bold"
                    : "text-GRAY border-transparent"
                }`}
              >
                {tab}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
});

HomePageTopBar.displayName = "HomePageTopBar";

export default HomePageTopBar;