1  import { useLocation, Link as RouterLink } from "react-router-dom";
 2  import { useTranslation } from "react-i18next";
 3  import { AppHeader } from "@acdc/design";
 4  import { updateDocumentDirection } from "../i18n";
 5  
 6  // Wrapper to make react-router-dom Link compatible with AppHeader
 7  const Link = ({
 8    href,
 9    className,
10    children,
11    onClick,
12  }: {
13    href: string;
14    className?: string;
15    children: React.ReactNode;
16    onClick?: () => void;
17  }) => (
18    <RouterLink to={href} className={className} onClick={onClick}>
19      {children}
20    </RouterLink>
21  );
22  
23  export default function Header() {
24    const location = useLocation();
25    const { t, i18n } = useTranslation("common");
26  
27    const navigation = [
28      { name: t("nav.ecosystem"), href: "/ecosystem" },
29      { name: t("nav.download"), href: "/download" },
30    ];
31  
32    const handleLanguageChange = (langCode: string) => {
33      i18n.changeLanguage(langCode);
34      updateDocumentDirection(langCode);
35    };
36  
37    // Build translated ecosystem apps
38    const ecosystemApps = [
39      {
40        name: t("services.network"),
41        href: "https://www.ac-dc.network",
42        description: t("serviceDescriptions.network"),
43      },
44      {
45        name: t("services.wallet"),
46        href: "https://wallet.ac-dc.network",
47        description: t("serviceDescriptions.wallet"),
48      },
49      {
50        name: t("services.governor"),
51        href: "https://governor.ac-dc.network",
52        description: t("serviceDescriptions.governor"),
53      },
54      {
55        name: t("services.scanner"),
56        href: "https://scanner.ac-dc.network",
57        description: t("serviceDescriptions.scanner"),
58      },
59      {
60        name: t("services.messenger"),
61        href: "https://messenger.ac-dc.network",
62        description: t("serviceDescriptions.messenger"),
63      },
64      {
65        name: t("services.docs"),
66        href: "https://docs.ac-dc.network",
67        description: t("serviceDescriptions.docs"),
68      },
69      {
70        name: t("services.forge"),
71        href: "https://forge.ac-dc.network",
72        description: t("serviceDescriptions.forge"),
73      },
74    ];
75  
76    return (
77      <AppHeader
78        serviceName={t("services.network")}
79        navigation={navigation}
80        currentPath={location.pathname}
81        LinkComponent={Link}
82        ecosystemHref="/"
83        currentLanguage={i18n.language}
84        onLanguageChange={handleLanguageChange}
85        ecosystemApps={ecosystemApps}
86        mobileMenuEcosystemLabel={t("mobileMenu.ecosystem")}
87      />
88    );
89  }