/* eslint-disable @next/next/no-img-element */
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import Title from "@/components/Title";
import translation from "@/translation/privacy.json";
import clsx from "clsx";
import React from "react";
import * as BsIcon from "react-icons/bs";
import {IconType} from "react-icons";

interface Props {
	language: "en" | "ar";
}

type ContentKey = keyof typeof translation.content;
type Translation = {ar: string; en: string};
interface Content {
	title?: Translation;
	text?: Translation;
	list?: Translation[];
}

export default function Privacy({language}: Props) {
	return (
		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
			<Navbar currentPage="/terms" language={language} />

			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
				<div className="w-full h-full flex flex-col items-center justify-center">
					<Title>{translation.title[language]}</Title>
				</div>
			</section>

			<section id="terms" className="w-full h-fit bg-white">
				<div
					className={clsx(
						"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",
						language === "ar" ? "text-right" : "text-left",
					)}>
					{Object.keys(translation.content).map((key) => {
						const content = translation.content[key as ContentKey] as Content;

						return (
							<span className="flex flex-col gap-1" key={key} id={key}>
								{content.title && <h2 className="font-semibold text-lg text-mti-purple-light">{content.title[language]}</h2>}
								{content.text && <p className="whitespace-pre-wrap">{content.text[language]}</p>}
								{content.list && (
									<ul className="list-disc pl-8">
										{content.list.map((text, index) => (
											<li className="whitespace-pre-wrap" key={index}>
												{text[language]}
											</li>
										))}
									</ul>
								)}
							</span>
						);
					})}
				</div>
			</section>

			<Footer language={language} />
		</main>
	);
}