"use client";
import MobileNav from "@/shared/header/MobileNav";
import HeaderNavItems from "@/shared/header/HeaderNavItems";
import HeaderPages from "@/shared/header/HeaderPages";
import UseSession from "@/hooks/UseSession";
import { RootState } from "@/store/store";
import { useSelector } from "react-redux";
import LocalePath from "@/shared/LocalePath";
import Logo from "@/public/logo.png";
import LoaderWrapper from "@/shared/Loader/LoaderWrapper";
import MediaWithFallback from "@/shared/MediaWithFallback";

export default function Header() {
  const session = UseSession();
  const { productCount } = useSelector((state: RootState) => state.CartConfig);
  const { isLoading } = useSelector((state: RootState) => state.AuthConfig);
  const { allCategoriesItems: categories } = useSelector(
    (state: RootState) => state.CategoriesConfig,
  );

  if (isLoading) return <LoaderWrapper />;
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 transition-all duration-500 bg-white shadow-lg border-b border-primary/10">
      <div className="container">
        <div className="hidden lg:flex items-center justify-between gap-8 h-24 py-6 px-4">
          <LocalePath
            href="/"
            className="flex items-center gap-3 group relative"
          >
            <div className="absolute -inset-2 bg-gradient-to-r from-primary/0 via-primary/10 to-secondary/0 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
            <div className="relative flex items-center">
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent opacity-0 group-hover:opacity-100"></div>
              <MediaWithFallback
                src={Logo}
                alt="logo icon"
                width="600"
                height="600"
                className="h-[180px] w-[260px]"
              />
            </div>
          </LocalePath>
          <HeaderNavItems categories={categories} />
          <HeaderPages session={session} productCount={productCount} />
        </div>
        <MobileNav
          productCount={productCount}
          session={session}
          categories={categories}
        />
      </div>
    </nav>
  );
}