Improved support for languages on the contacts display feature

src/templates/AgentContacts.tsx

@@ -0,0 +1,68 @@
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
+import Title from "@/components/Title";
+import { Contact } from "@/types/contact";
+import translation from "@/translation/agentcontacts.json";
+type Language = "en" | "ar";
+
+interface Props {
+  country: string;
+  page: string;
+  language: Language;
+}
+
+async function getCountryManagers(country: string, language: Language = "en") {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents/${country}?language=${language}`
+  );
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch contacts");
+  }
+
+  return res.json();
+}
+
+export async function generateStaticParamsHelper(language: Language = "en") {
+  const contacts = (await fetch(
+    `${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents?language=${language}`
+  ).then((res) => res.json())) as Contact[];
+  return contacts.map(({ key }) => ({
+    country: key.toLowerCase().replaceAll(" ", ""),
+  }));
+}
+export async function AgentContacts({ language, page, country }: Props) {
+  const contact = (await getCountryManagers(country, language)) as Contact;
+
+  return (
+    <main className="text-mti-black flex h-screen w-full flex-col bg-white">
+      <Navbar currentPage={page} language={language} />
+
+      <section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">
+        <div className="flex h-full w-full flex-col items-center justify-center">
+          <Title>{`${contact.label} Contacts`}</Title>
+        </div>
+      </section>
+
+      <section className="bg-white h-full w-full p-8 md:p-16 flex gap-16 justify-center flex-wrap">
+        {contact.entries.map((entry) => (
+          <div key={entry.name}>
+            <h2>
+              <strong>{translation.name[language]}: </strong>
+              {entry.name}
+            </h2>
+            <p>
+              <strong>{translation.number[language]}: </strong>
+              {entry.number}
+            </p>
+            <p>
+              <strong>{translation.email[language]}: </strong>
+              {entry.email}
+            </p>
+          </div>
+        ))}
+      </section>
+      <Footer language={language} />
+    </main>
+  );
+}