/* 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";
import PrivacyPolicyPage from "@/types/cms/privacyPolicy";

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

export default function Privacy({language, data}: Props) {
	return (
		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
			<Navbar currentPage="/privacy-policy" 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>{data.Title}</Title>
				</div>
			</section>

			<section id="privacy-policy" 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",
					)}>
					{data.Content.map((content, index) => {
						return (
							<span className="flex flex-col gap-1" key={index} id={index.toString()}>
								{content.Title && <h2 className="font-semibold text-lg text-mti-purple-light">{content.Title}</h2>}
								{content.Text && <p className="whitespace-pre-wrap">{content.Text}</p>}
								{content.List && (
									<ul className="list-disc pl-8">
										{content.List.split("\n").map((text, index) => (
											<li className="whitespace-pre-wrap" key={index}>
												{text}
											</li>
										))}
									</ul>
								)}
							</span>
						);
					})}
				</div>
			</section>

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