import React from "react";
import Link from "next/link";
import Image from "next/image";
import { useTranslation } from "react-i18next";
// import LanguageDropdown from "../navbar/LanguageDropdown";
import { useAuth } from "@/context/helpers/auth/AuthContext";
import TopbarLeftContent from "./topbarLeftContent";
import { useHome } from "@/context/helpers/Home/HomeContext";
import LanguageDropdown from "@/components/layout/parts/header-1/navbar/LanguageDropdown";
import Branches from "@/components/shared/Branches";

function TopBar() {
  const { t } = useTranslation("header");
  const { user } = useAuth();
  const { contactNumber } = useHome();

  return (
    <section className="border-gray-200 dark:border-gray-600 border-b w-full text-gray-600 dark:text-gray-400 text-sm">
      <div className="flex sm:flex-row flex-col sm:justify-between items-center gap-2 sm:gap-0 mx-auto px-2 sm:px-4 py-1 max-w-7xl">
        {/* DESKTOP / SM+ */}
        <div className="hidden sm:flex sm:justify-between sm:items-center gap-4 sm:w-full">
          <TopbarLeftContent />
          <div className="flex justify-between items-center gap-4">
            {contactNumber && (
              <span className="flex items-center gap-1 text-gray-500 dark:text-gray-300 text-xs">
                {t("topbar.needHelp")}
                <a href={`tel:${contactNumber}`}>
                  <span className="font-semibold text-mainColor">
                    {contactNumber}
                  </span>
                </a>
              </span>
            )}

            <Branches />

            <LanguageDropdown />
          </div>
        </div>

        {/* MOBILE VIEW */}
        <div className="md:hidden flex justify-between items-center w-full">
          {/* User content centered */}
          <div className="mx-auto">
            {user ? (
              <Link href="/account" className="cursor-pointer">
                {t("topbar.myAccount")}
              </Link>
            ) : (
              <div className="flex items-center gap-2">
                <Link href="/account/login" className="flex items-center gap-1">
                  <Image
                    src="/images/user.svg"
                    alt="user"
                    width={16}
                    height={16}
                  />
                  {t("topbar.signIn")}
                </Link>

                <span className="px-1 text-[#AAAAAA]">/</span>

                <Link href="/account/register">{t("topbar.register")}</Link>
              </div>
            )}
          </div>

          {/* Language dropdown right */}
          <div className="flex-shrink-0">
            <LanguageDropdown />
          </div>
        </div>
      </div>
    </section>
  );
}

export default TopBar;