"use client";
import NavItemsDrawer from "./NavItemsDrawer";
import { CategoriesProps, SessionType } from "@/interfaces/types";
import HeaderLogo from "./HeaderLogo";
import LocalePath from "../LocalePath";

const MobileNav = ({
  session,
  productCount,
  categories,
}: {
  session: SessionType | null;
  productCount: number;
  categories: CategoriesProps[];
}) => {
  return (
    <div className="lg:hidden">
      <div className="flex items-center justify-between h-20 px-2">
        <HeaderLogo />
        <div className="flex items-center gap-3">
          {session && (
            <LocalePath
              href="/profile/notifications"
              className="relative p-3 hover:bg-primary-light rounded-lg transition-all duration-200 group"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="lucide lucide-bell *:stroke-text-secondary group-hover:*:stroke-primary transition-colors"
              >
                <path d="M10.268 21a2 2 0 0 0 3.464 0"></path>
                <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path>
              </svg>
            </LocalePath>
          )}
          <LocalePath href="/cart" className="relative p-2.5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-shopping-cart text-text-primary"
            >
              <circle cx="8" cy="21" r="1"></circle>
              <circle cx="19" cy="21" r="1"></circle>
              <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
            </svg>
            <span className="absolute -top-0.5 -right-0.5 bg-primary text-white text-xs w-4 h-4 rounded-full flex items-center justify-center">
              {productCount}
            </span>
          </LocalePath>
          <NavItemsDrawer session={session} categories={categories} />
        </div>
      </div>
      <div className="pb-4 px-2">
        <div className="relative">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-search absolute top-1/2 -translate-y-1/2 text-text-secondary right-5"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.3-4.3"></path>
          </svg>
          <input
            type="text"
            placeholder="ابحث عن الورود والباقات..."
            className="w-full py-4 pr-14 pl-6 bg-white border-2 border-gray-200 rounded-full text-[15px] text-text-primary placeholder:text-text-secondary focus:outline-none focus:border-primary hover:border-gray-200/60 transition-all shadow-sm"
          />
        </div>
      </div>
      {/* <div className="lg:hidden overflow-hidden h-auto">
        <div className="py-6 border-t border-primary/10">
          <div className="flex flex-col gap-3">
            <button className="text-right px-6 py-4 hover:bg-gradient-to-r hover:from-primary/10 hover:to-transparent rounded-xl transition-all duration-300">
              الرئيسية
            </button>
            <button className="text-right px-6 py-4 hover:bg-gradient-to-r hover:from-primary/10 hover:to-transparent rounded-xl transition-all duration-300">
              ورد مفرد
            </button>
            <button className="text-right px-6 py-4 hover:bg-gradient-to-r hover:from-primary/10 hover:to-transparent rounded-xl transition-all duration-300">
              اشتراكات أسبوعية
            </button>
            <button className="text-right px-6 py-4 hover:bg-gradient-to-r hover:from-primary/10 hover:to-transparent rounded-xl transition-all duration-300">
              تنسيقات
            </button>
            <div className="border-t border-primary/10 mt-4 pt-6 px-4 space-y-4">
              {session ? (
                <LocalePath
                  href="/profile"
                  className="w-full bg-gradient-to-r from-primary to-primary-dark text-white py-4 rounded-xl shadow-lg"
                >
                  الملف الشخصي
                </LocalePath>
              ) : (
                <LocalePath
                  href="/auth/login"
                  className="w-full bg-gradient-to-r from-primary to-primary-dark text-white py-4 rounded-xl shadow-lg"
                >
                  تسجيل الدخول
                </LocalePath>
              )}
              <button className="w-full border-2 border-primary text-primary py-4 rounded-xl hover:bg-primary hover:text-white transition-all duration-300">
                <LangSwitcher />
              </button>
            </div>
          </div>
        </div>
      </div> */}
    </div>
  );
};

export default MobileNav;