"use client";

import Link from "next/link";
import { useState, useEffect, useRef, useCallback } from "react";
import {
  Menu,
  X,
  ChevronDown,
  User,
  LogOut,
  BookOpen,
  Home,
  Phone,
  ChevronRight,
  Bell,
  Megaphone,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { usePathname, useRouter } from "next/navigation";
import Image from "next/image";
import { getStoredLanguage, Language, setStoredLanguage } from "@/lib/language";
import MaleIcon from "@/public/images/male.svg";
import FemaleIcon from "@/public/images/female.svg";
import { getTranslation } from "@/src/hooks/useTranslation";
import { useLanguage } from "@/src/hooks/LanguageContext";
import {
  ACTIVE_COURSE_LANGUAGE_STORAGE_KEY,
  COURSE_MAP_STORAGE_KEY,
} from "@/lib/courseSelection";
import { getTransactionHistory } from "@/lib/api/apis";
import {
  AUTH_CHANGE_EVENT,
  getUserPhoto,
  notifyAuthChange,
  notifyMobileMenu,
} from "@/lib/authEvents";
import AnnouncementBell from "./AnnouncementBell";

const languages: { code: Language; label: string; short: string }[] = [
  { code: "english", label: "English", short: "EN" },
  { code: "hindi", label: "हिंदी", short: "HI" },
];

// Reusable avatar that shows the user's photo when available and
// gracefully falls back to a gender icon or the name initial.
function UserAvatar({
  user,
  sizeClass = "w-10 h-10",
}: {
  user: any;
  sizeClass?: string;
}) {
  const photo = getUserPhoto(user);
  const [imgError, setImgError] = useState(false);

  // Reset the error flag whenever the photo URL changes (e.g. after upload)
  useEffect(() => {
    setImgError(false);
  }, [photo]);

  if (photo && !imgError) {
    return (
      <img
        src={photo}
        alt={user?.name || "User"}
        className={`${sizeClass} rounded-full object-cover`}
        onError={() => setImgError(true)}
      />
    );
  }

  return (
    <div
      className={`${sizeClass} rounded-full overflow-hidden bg-[#FFF4E4] flex items-center justify-center`}
    >
      {user?.gender === "1" || user?.gender === 1 ? (
        <Image src={MaleIcon} alt="Male" className="w-full h-full object-contain" />
      ) : user?.gender === "2" || user?.gender === 2 ? (
        <Image
          src={FemaleIcon}
          alt="Female"
          className="w-full h-full object-contain"
        />
      ) : (
        <span className="text-[#FAA631] font-bold">
          {user?.name?.charAt(0)?.toUpperCase() || "U"}
        </span>
      )}
    </div>
  );
}

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [token, setToken] = useState<string | null>(null);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const pathname = usePathname();
  const router = useRouter();
  const { language, setLanguage } = useLanguage();

  const [isLangOpen, setIsLangOpen] = useState(false);
  const langRef = useRef<HTMLDivElement>(null);
  const t = getTranslation(language);
  const [user, setUser] = useState<any>(null);
  const [hasDonations, setHasDonations] = useState(false);
  const [isAboutOpen, setIsAboutOpen] = useState(false);
  const aboutRef = useRef<HTMLDivElement>(null);
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  useEffect(() => {
    if (isMounted) {
      setLanguage(getStoredLanguage());
    }
  }, [isMounted]);

  // 🔄 Read the current auth/user state from localStorage
  const syncAuth = useCallback(() => {
    try {
      setToken(localStorage.getItem("token"));

      const storedData = localStorage.getItem("register_details");
      const stored = localStorage.getItem("user_data");

      let nextUser: any = null;
      if (storedData) {
        const parsed = JSON.parse(storedData);
        if (parsed?.country) {
          nextUser = parsed;
        }
      }
      if (!nextUser && stored) {
        nextUser = JSON.parse(stored);
      }
      setUser(nextUser);
    } catch (error) {
      console.error("Error accessing localStorage:", error);
    }
  }, []);

  // Sync on mount and whenever the route changes (covers client-side
  // navigation after login/register where there is no full reload).
  useEffect(() => {
    if (!isMounted) return;
    syncAuth();
  }, [isMounted, pathname, syncAuth]);

  // Re-sync immediately when auth changes in this tab (custom event),
  // in another tab (storage event), or when the window regains focus.
  useEffect(() => {
    if (!isMounted) return;
    const handler = () => syncAuth();
    window.addEventListener(AUTH_CHANGE_EVENT, handler);
    window.addEventListener("storage", handler);
    window.addEventListener("focus", handler);
    return () => {
      window.removeEventListener(AUTH_CHANGE_EVENT, handler);
      window.removeEventListener("storage", handler);
      window.removeEventListener("focus", handler);
    };
  }, [isMounted, syncAuth]);

  // Only show the "Donation History" entry if the user has at least one transaction.
  useEffect(() => {
    if (!isMounted || !token || !user?.id) {
      setHasDonations(false);
      return;
    }

    let cancelled = false;
    const checkDonations = async () => {
      try {
        const fd = new FormData();
        fd.append("user_id", user.id);
        const res = await getTransactionHistory(fd);
        const orders = res?.data?.orders;
        if (!cancelled) {
          setHasDonations(Array.isArray(orders) && orders.length > 0);
        }
      } catch (error) {
        if (!cancelled) setHasDonations(false);
      }
    };

    checkDonations();
    return () => {
      cancelled = true;
    };
  }, [isMounted, token, user?.id]);

  const navItems = [
    { href: "/", label: t.header.home },
    { href: "/course/online", label: t.header.gitaCourse },
    // { href: "/ai-chatbot", label: t.header.chatbot },
    // { href: "/about", label: t.header.about },
    { href: "/contact", label: t.header.contact },
    // { href: "/privacy", label: t.header.privacy },
  ];

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Node;

      // User dropdown
      if (dropdownRef.current && !dropdownRef.current.contains(target)) {
        setIsDropdownOpen(false);
      }

      // Language dropdown
      if (langRef.current && !langRef.current.contains(target)) {
        setIsLangOpen(false);
      }
      if (aboutRef.current && !aboutRef.current.contains(target)) {
        setIsAboutOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handleLanguageChange = (lang: Language) => {
    setLanguage(lang);
    setStoredLanguage(lang);
    setIsLangOpen(false);

    // 🔜 later:
    // i18n.changeLanguage(lang);
    router.refresh();
  };

  // 🧠 Detect scroll for header shadow
  useEffect(() => {
    const handleScroll = () => setIsScrolled(window.scrollY > 20);
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  // 🔒 Lock body scroll + hide floating chat when mobile sidebar is open
  useEffect(() => {
    if (isMobileMenuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    notifyMobileMenu(isMobileMenuOpen);
    return () => {
      document.body.style.overflow = "";
    };
  }, [isMobileMenuOpen]);

  const handleLogout = useCallback(() => {
    try {
      localStorage.removeItem("token");
      localStorage.removeItem("user_name");
      localStorage.removeItem("user_data");
      localStorage.removeItem("register_details");
      localStorage.removeItem("guidelines_seen");
      localStorage.removeItem("selectedLanguage");
      localStorage.removeItem("gita_course_progress_v1");
      localStorage.removeItem("course_id");
      localStorage.removeItem(COURSE_MAP_STORAGE_KEY);
      localStorage.removeItem(ACTIVE_COURSE_LANGUAGE_STORAGE_KEY);
    } catch (error) {
      console.error("Error clearing localStorage:", error);
    }
    setToken(null);
    setUser(null);
    setIsDropdownOpen(false);
    notifyAuthChange();
    router.replace("/login");
  }, [router]);

  const handleLoginNavigation = useCallback(() => {
    setIsMobileMenuOpen(false);
    setIsAboutOpen(false);
    setIsLangOpen(false);
    setIsDropdownOpen(false);
    router.push("/login"); // Use router.push instead
  }, [router]);

  useEffect(() => {
    const handleRouteChange = () => {
      // Force re-render if navigation seems broken
      setIsMobileMenuOpen(false);
      setIsDropdownOpen(false);
    };

    window.addEventListener("popstate", handleRouteChange);

    return () => {
      window.removeEventListener("popstate", handleRouteChange);
    };
  }, []);

  if (!isMounted) {
    return null;
  }

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white  ${
        isScrolled ? "shadow-lg" : "shadow-none"
      }`}
    >
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-20">
          <Link href="/" className="flex items-center space-x-2">
            {/* <div className="w-12 h-12 bg-gradient-to-br from-[#FAA631] to-[#FAA631] rounded-full flex items-center justify-center">
              <span className="text-white font-bold text-xl">B</span>
            </div> */}
            <Image
              src="/images/logo.png"
              alt="trophy"
              width={65}
              height={65}
              className="w-15 h-15 md:w-20 md:h-20 object-contain"
            />
            {/* <span className="text-xl font-bold text-gray-800">
              Bhagavad Gita Olympiad
            </span> */}
          </Link>

          {/* 💻 Desktop Navigation */}
          {/* (Preserving commented legacy nav for dropdown use later) */}
          {/* <nav className="hidden lg:flex items-center space-x-8"> ... </nav> */}

          {/* ✅ Active Desktop Nav (cleaned + active underline animation) */}
          <nav className="hidden lg:flex items-center space-x-8">
            {navItems.map(({ href, label }) => {
              const isActive = pathname === href;
              return (
                <Link
                  key={href}
                  href={href}
                  className={`group relative font-medium transition-all duration-300 pb-1 ${
                    isActive
                      ? "text-[#FAA631]"
                      : "text-gray-700 hover:text-[#FAA631]"
                  }`}
                >
                  {label}
                  <span
                    className={`absolute left-0 -bottom-[2px] h-[2px] bg-[#FAA631] transition-all duration-300 ease-in-out ${
                      isActive ? "w-full" : "w-0 group-hover:w-full"
                    }`}
                  />
                </Link>
              );
            })}
            <div className="relative" ref={aboutRef}>
              <button
                onClick={() => setIsAboutOpen((v) => !v)}
                className="flex items-center gap-1 font-medium text-gray-700 hover:text-[#FAA631]"
              >
                {t.header.about}
                <ChevronDown size={16} />
              </button>

              {isAboutOpen && (
                <div className="absolute left-0 mt-3 w-72 bg-white shadow-xl rounded-xl border z-50 overflow-hidden">
                  <Link
                    href="/about"
                    className="block px-4 py-3 text-sm hover:bg-orange-50 hover:text-[#FAA631]"
                    onClick={() => setIsAboutOpen(false)}
                  >
                    {t.aboutMenu.about}
                  </Link>

                  <Link
                    href="/about/srila-prabhupada"
                    className="block px-4 py-3 text-sm hover:bg-orange-50 hover:text-[#FAA631]"
                    onClick={() => setIsAboutOpen(false)}
                  >
                    {t.aboutMenu.srilaPrabhupada}
                  </Link>

                  <Link
                    href="/about/shri-vrindavan-chandra-das-ji"
                    className="block px-4 py-3 text-sm hover:bg-orange-50 hover:text-[#FAA631]"
                    onClick={() => setIsAboutOpen(false)}
                  >
                    {t.aboutMenu.vrindavanChandraDas}
                  </Link>

                  <Link
                    href="/about/bhakt-bhagwat"
                    className="block px-4 py-3 text-sm hover:bg-orange-50 hover:text-[#FAA631]"
                    onClick={() => setIsAboutOpen(false)}
                  >
                    {t.aboutMenu.bhaktBhagwat}
                  </Link>
                </div>
              )}
            </div>
            {/* 🌐 Language Selector */}
            <div className="relative" ref={langRef}>
              <button
                onClick={() => setIsLangOpen((v) => !v)}
                className="flex items-center gap-2 px-4 py-2 rounded-full border border-gray-300
             text-gray-700 hover:border-[#FAA631] hover:text-[#FAA631] transition"
              >
                <Image
                  src="/images/language.svg"
                  alt="language"
                  width={10}
                  height={10}
                  className="w-6 h-6"
                />
                <span className="font-semibold">
                  {language === "english" ? "EN" : "हिं"}
                </span>
                <ChevronDown size={16} />
              </button>

              {isLangOpen && (
                <div className="absolute right-0 mt-2 w-40 bg-white rounded-xl shadow-lg border overflow-hidden z-50">
                  {languages.map((lang) => (
                    <button
                      key={lang.code}
                      onClick={() => handleLanguageChange(lang.code)}
                      className={`w-full px-4 py-2 text-left text-sm transition
      ${
        language === lang.code
          ? "bg-orange-50 text-[#FAA631] font-semibold"
          : "hover:bg-gray-50 text-gray-700"
      }
    `}
                    >
                      {lang.label}
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* 🔔 Announcement Bell */}
            {token && <AnnouncementBell />}

            {/* 🔐 Conditional Button / User Menu */}
            {!token ? (
              <div className="flex items-center gap-3">
                <Button
                  variant="outline"
                  className="text-lg border-2 border-[#FAA631] text-[#FAA631] hover:bg-[#FAA631] hover:text-[#FFFFFF]"
                  onClick={handleLoginNavigation}
                >
                  {t.header.login}
                </Button>
                <Button
                  className="text-lg bg-[#FAA631] text-white hover:bg-[#e0911d]"
                  onClick={() => router.push("/signup")}
                >
                  {t.header.signUp}
                </Button>
              </div>
            ) : (
              <div className="relative" ref={dropdownRef}>
                <button
                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                  className="w-10 h-10 rounded-full overflow-hidden flex items-center justify-center border border-[#FAA631] hover:opacity-90 transition"
                >
                  <UserAvatar user={user} sizeClass="w-10 h-10" />
                </button>

                {isDropdownOpen && (
                  <div className="absolute right-0 mt-3 w-60 bg-white shadow-xl rounded-xl border border-gray-100 overflow-hidden z-50">
                    {/* 👤 User Info */}
                    <div className="flex items-center justify-center gap-3 px-4 py-3 bg-gray-50">
                      {/* Profile Image */}
                      <UserAvatar user={user} sizeClass="w-12 h-12" />

                      {/* Name & Email */}
                      <div className="min-w-0">
                        <p className="text-sm font-semibold text-gray-800 truncate">
                          {user?.name || "Guest User"}
                        </p>
                        {user?.email && (
                          <p className="text-xs text-gray-500 truncate">
                            {user.email}
                          </p>
                        )}
                      </div>
                    </div>

                    <div className="h-px bg-gray-200" />

                    {/* 📄 Menu Items */}
                    <Link
                      href="/profile"
                      onClick={() => setIsDropdownOpen(false)}
                      className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-orange-50 hover:text-[#FAA631] transition"
                    >
                      {t.header.profile}
                    </Link>

                    {hasDonations && (
                      <button
                        onClick={() => {
                          router.push("/donate/history");
                          setIsDropdownOpen(false);
                        }}
                        className="w-full text-left px-4 py-2.5 text-sm text-gray-700 hover:bg-orange-50 hover:text-[#FAA631] transition"
                      >
                        {t.header.donationHistory}
                      </button>
                    )}

                    <div className="h-px bg-gray-200" />

                    {/* 🚪 Logout */}
                    <button
                      onClick={handleLogout}
                      className="w-full text-left px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition"
                    >
                      {t.header.logout}
                    </button>
                  </div>
                )}
              </div>
            )}
          </nav>

          {/* 📱 Mobile: hamburger + sidebar */}
          <div className="lg:hidden flex items-center gap-3">
            {/* 🔔 Announcement Bell - Mobile (only when logged in) */}
            {token && <AnnouncementBell />}

            {/* Show user avatar on mobile too when logged in */}
            {token && user && (
              <button
                onClick={() => router.push("/profile")}
                className="w-9 h-9 rounded-full overflow-hidden shrink-0 flex items-center justify-center"
              >
                <UserAvatar user={user} sizeClass="w-9 h-9" />
              </button>
            )}
            <button
              aria-label="Toggle menu"
              className="text-gray-700 p-1"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              {isMobileMenuOpen ? <X size={26} /> : <Menu size={26} />}
            </button>
          </div>
        </div>
      </div>

      {/* ── MOBILE SIDEBAR OVERLAY ── */}
      {/* Backdrop */}
      {isMobileMenuOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm lg:hidden"
          onClick={() => setIsMobileMenuOpen(false)}
        />
      )}

      {/* Sidebar panel — slides in from right */}
      <div
        className={`fixed top-0 right-0 z-50 h-full w-[82vw] max-w-[340px] bg-white shadow-2xl
          flex flex-col lg:hidden transition-transform duration-300 ease-in-out
          ${isMobileMenuOpen ? "translate-x-0" : "translate-x-full"}`}
      >
        {/* ── Sidebar Header ── */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
          <Link href="/" onClick={() => setIsMobileMenuOpen(false)}>
            <Image
              src="/images/logo.png"
              alt="Give Gita"
              width={50}
              height={50}
              className="h-10 w-auto object-contain"
            />
          </Link>
          <button
            onClick={() => setIsMobileMenuOpen(false)}
            className="w-9 h-9 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition"
          >
            <X size={20} />
          </button>
        </div>

        {/* ── User Card (if logged in) ── */}
        {token && user && (
          <div className="mx-4 mt-4 rounded-2xl bg-gradient-to-br from-[#FFF4E4] to-[#FFF8F0] border border-[#FAA631]/20 px-4 py-3 flex items-center gap-3">
            <div className="w-12 h-12 rounded-full overflow-hidden shrink-0 flex items-center justify-center">
              <UserAvatar user={user} sizeClass="w-12 h-12" />
            </div>
            <div className="min-w-0">
              <p className="font-semibold text-gray-900 truncate text-sm">
                {user?.name || "User"}
              </p>
              {user?.email && (
                <p className="text-xs text-gray-500 truncate">{user.email}</p>
              )}
            </div>
          </div>
        )}

        {/* ── Scrollable Nav Content ── */}
        <div className="flex-1 overflow-y-auto px-4 py-4 space-y-1">
          {/* Main nav items */}
          {navItems.map(({ href, label }) => {
            const isActive = pathname === href;
            return (
              <Link
                key={href}
                href={href}
                onClick={() => setIsMobileMenuOpen(false)}
                className={`flex items-center gap-3 px-4 py-3 rounded-xl font-medium text-sm transition-all ${
                  isActive
                    ? "bg-[#FAA631] text-white"
                    : "text-gray-700 hover:bg-orange-50 hover:text-[#FAA631]"
                }`}
              >
                {href === "/" && <Home size={17} />}
                {href === "/course/online" && <BookOpen size={17} />}
                {href === "/contact" && <Phone size={17} />}
                {label}
              </Link>
            );
          })}

          {/* About — collapsible */}
          <div>
            <button
              onClick={() => setIsAboutOpen((v) => !v)}
              className="w-full flex items-center justify-between px-4 py-3 rounded-xl text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-[#FAA631] transition-all"
            >
              <span className="flex items-center gap-3">
                <User size={17} />
                {t.header.about}
              </span>
              <ChevronDown
                size={16}
                className={`transition-transform duration-200 ${isAboutOpen ? "rotate-180 text-[#FAA631]" : ""}`}
              />
            </button>

            {isAboutOpen && (
              <div className="ml-4 mt-1 space-y-1 border-l-2 border-[#FAA631]/20 pl-3">
                {[
                  { href: "/about", label: t.aboutMenu.about },
                  {
                    href: "/about/srila-prabhupada",
                    label: t.aboutMenu.srilaPrabhupada,
                  },
                  {
                    href: "/about/shri-vrindavan-chandra-das-ji",
                    label: t.aboutMenu.vrindavanChandraDas,
                  },
                  {
                    href: "/about/bhakt-bhagwat",
                    label: t.aboutMenu.bhaktBhagwat,
                  },
                ].map(({ href, label }) => (
                  <Link
                    key={href}
                    href={href}
                    onClick={() => {
                      setIsAboutOpen(false);
                      setIsMobileMenuOpen(false);
                    }}
                    className="flex items-center justify-between px-3 py-2.5 rounded-lg text-sm text-gray-600 hover:bg-orange-50 hover:text-[#FAA631] transition-all"
                  >
                    {label}
                    <ChevronRight size={14} className="text-gray-400" />
                  </Link>
                ))}
              </div>
            )}
          </div>

          {/* Announcements Link */}
          <Link
            href="/announcement"
            onClick={() => setIsMobileMenuOpen(false)}
            className="flex items-center justify-between px-4 py-3 rounded-xl text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-[#FAA631] transition-all"
          >
            <span className="flex items-center gap-3">
              <Megaphone size={17} />
              Announcements
            </span>
            <ChevronRight size={14} className="text-gray-400" />
          </Link>

          {/* Profile & Donation History (if logged in) */}
          {token && (
            <>
              <div className="h-px bg-gray-100 my-2" />
              <Link
                href="/profile"
                onClick={() => setIsMobileMenuOpen(false)}
                className="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-[#FAA631] transition-all"
              >
                <User size={17} />
                {t.header.profile}
              </Link>
              {hasDonations && (
                <button
                  onClick={() => {
                    router.push("/donate/history");
                    setIsMobileMenuOpen(false);
                  }}
                  className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-[#FAA631] transition-all"
                >
                  <BookOpen size={17} />
                  {t.header.donationHistory}
                </button>
              )}
            </>
          )}
        </div>

        {/* ── Sidebar Footer ── */}
        <div className="border-t border-gray-100 px-4 py-4 space-y-3">
          {/* Language switcher */}
          <div className="flex gap-2">
            {languages.map((lang) => (
              <button
                key={lang.code}
                onClick={() => handleLanguageChange(lang.code)}
                className={`flex-1 py-2.5 rounded-xl text-sm font-semibold border transition-all ${
                  language === lang.code
                    ? "bg-[#FAA631] text-white border-[#FAA631]"
                    : "border-gray-200 text-gray-600 hover:border-[#FAA631] hover:text-[#FAA631]"
                }`}
              >
                {lang.label}
              </button>
            ))}
          </div>

          {/* Login / Logout */}
          {!token ? (
            <div className="flex gap-3">
              <button
                onClick={handleLoginNavigation}
                className="flex-1 py-3 rounded-xl bg-[#FAA631] text-white font-semibold text-sm hover:bg-[#e0911d] transition-all"
              >
                {t.header.login}
              </button>
              <button
                onClick={() => {
                  setIsMobileMenuOpen(false);
                  router.push("/signup");
                }}
                className="flex-1 py-3 rounded-xl border-2 border-[#FAA631] text-[#FAA631] font-semibold text-sm hover:bg-[#FFF4E4] transition-all"
              >
                {t.header.signUp}
              </button>
            </div>
          ) : (
            <button
              onClick={handleLogout}
              className="w-full flex items-center justify-center gap-2 py-3 rounded-xl border-2 border-red-200 text-red-600 font-semibold text-sm hover:bg-red-50 transition-all"
            >
              <LogOut size={16} />
              {t.header.logout}
            </button>
          )}
        </div>
      </div>
    </header>
  );
}