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";
import CountryManagerContactsPage from "@/types/cms/countryManagerContacts";
type Language = "en" | "ar";

interface Props {
	country: string;
	page: string;
	language: Language;
	data: CountryManagerContactsPage;
}

async function getCountryManagers(country: string, language: Language = "en") {
	const res = await fetch(`https://platform.encoach.com/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(`https://platform.encoach.com/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, data}: 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>{data.Name}: </strong>
							{entry.name}
						</h2>
						<p>
							<strong>{data.Number}: </strong>
							{entry.number}
						</p>
						<p>
							<strong>{data.Email}: </strong>
							{entry.email}
						</p>
					</div>
				))}
			</section>
			<Footer language={language} />
		</main>
	);
}