/* 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/history.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";
}

interface ElementProps {
	date: string;
	Icon: IconType;
	label: string;
	language: "ar" | "en";
	isEven?: boolean;
}

const Element = ({date, label, isEven, language, Icon}: ElementProps) => {
	return (
		<>
			<div className={clsx("flex items-center gap-8 -md:hidden", isEven && "flex-row-reverse")}>
				<div className={clsx("w-64 bg-mti-rose-ultralight p-4 rounded-xl", language === "ar" && "text-right")}>
					<span>{label}</span>
				</div>
				<div className="h-16 w-16 rounded-full bg-mti-purple-dark flex items-center justify-center text-white border-white border-4 drop-shadow">
					<Icon className="h-6 w-6" />
				</div>
				<span className={clsx("w-64 text-mti-purple-light font-semibold text-lg", isEven && "text-right")}>{date}</span>
			</div>

			<div className={clsx("flex items-center gap-8 md:hidden", language === "ar" && "flex-row-reverse text-right")}>
				<div className="h-16 w-16 rounded-full bg-mti-purple-dark flex items-center justify-center text-white border-white border-4 drop-shadow">
					<Icon className="h-6 w-6" />
				</div>
				<div className="flex flex-col">
					<span className={clsx("w-64 text-mti-purple-light font-semibold text-lg")}>{date}</span>
					<div className="w-64 bg-mti-rose-ultralight p-4 rounded-xl">
						<span>{label}</span>
					</div>
				</div>
			</div>
		</>
	);
};

export default function History({language}: Props) {
	return (
		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
			<Navbar currentPage="/history" 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="history" className="w-full h-fit bg-white">
				<div className="w-full h-fit flex flex-col items-center gap-8 p-8 md:p-20 container mx-auto relative">
					<div className="flex flex-col gap-8 z-20">
						{translation.events.map((event, index) => (
							<Element
								date={event.date[language]}
								label={event.label[language]}
								Icon={BsIcon[event.icon as keyof typeof BsIcon]}
								key={index}
								isEven={(index + 1) % 2 === 0}
								language={language}
							/>
						))}
					</div>
					<div
						className={clsx(
							"w-2 h-[89%] bg-mti-purple-light absolute md:left-1/2 md:-translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full",
							language === "en" && "left-1/2 -translate-x-[148px]",
							language === "ar" && "right-1/2 translate-x-[148px]",
						)}
					/>
				</div>
			</section>

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