"use client";
import LocalePath from "../LocalePath";
import LangSwitcher from "../lang/LangSwitcher";
import { SessionType } from "@/interfaces/types";
import SearchComponent from "../SearchComponent";
import { useTranslations } from "next-intl";

export default function HeaderPages({
  session,
  productCount,
}: {
  session: SessionType | null;
  productCount: number;
}) {
  const t = useTranslations("");
  return (
    <div className="flex items-center gap-3 flex-shrink-0 pl-2">
      <SearchComponent />
      <LocalePath
        href="/cart"
        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-shopping-cart text-text-secondary group-hover:text-primary transition-colors"
        >
          <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 shadow-sm">
          {productCount}
        </span>
      </LocalePath>
      {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>
      )}
      <div className="w-px h-8 bg-gray-200/30 mx-4"></div>
      <LangSwitcher />

      {session ? (
        <LocalePath
          href="/profile"
          className="p-3 hover:bg-primary-light rounded-lg transition-all duration-200 group ml-1"
        >
          <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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </LocalePath>
      ) : (
        <LocalePath
          href="/auth/login"
          className="px-6 py-2.5 bg-primary text-white text-[14px] rounded-lg shadow-sm hover:shadow-md transition-all duration-200 ml-1"
        >
          {t("NAV.login")}
        </LocalePath>
      )}
    </div>
  );
}