import Navbar from "@/components/Navbar";
import clsx from "clsx";
import Title from "@/components/Title";
import * as BsIcon from "react-icons/bs";
import {
	BsBook,
	BsBlockquoteLeft,
	BsFillPencilFill,
	BsMic,
	BsSoundwave,
	BsBookmarkStar,
	BsCheck2Circle,
	BsEarbuds,
	BsFileBarGraph,
	BsBank,
} from "react-icons/bs";
import Footer from "@/components/Footer";
import ServicesPage from "@/types/cms/services";

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

interface SectionStruct {
	id: string;
	title: string;
	description: string;
	bullets: {
		title: string;
		values: string[];
		icon: any;
	}[];
}

export default function Services({language, data}: Props) {
	const struct: SectionStruct[] = [
		...(data.ModuleEvaluation?.map((module, index) => ({
			id: index.toString(),
			description: module.Text,
			title: module.Title,
			bullets: [
				{
					title: module.Evaluation,
					values: module.EvaluationValues?.split("\n"),
					icon: BsIcon[module.EvaluationIcon as keyof typeof BsIcon],
				},
				{
					title: module.Acquire,
					values: module.AcquireValues?.split("\n"),
					icon: BsIcon[module.AcquireIcon as keyof typeof BsIcon],
				},
			],
		})) || []),
		{
			id: "progress_tracking",
			title: data.ProgressTracking.Title,
			description: data.ProgressTracking.Text,
			bullets: [
				{
					title: data.ProgressTracking.Advantages,
					values: data.ProgressTracking.AdvantageValues?.split("\n"),
					icon: BsFileBarGraph,
				},
			],
		},
	];

	const final_struct = [
		{
			id: "unified_english_level_test",
			title: data.UnifiedEnglishLevelTest.Title,
			description: data.UnifiedEnglishLevelTest.Text,
			bullets: [
				{
					title: data.UnifiedEnglishLevelTest.Advantages,
					values: data.UnifiedEnglishLevelTest.AdvantageValues?.split("\n"),
					icon: BsBank,
				},
			],
		},
		{
			id: "customized_packages",
			title: data.CustomizedPackages.Title,
			description: data.CustomizedPackages.Text,
			bullets: [],
		},
	];

	const renderStruct = (data: SectionStruct[], getBackgroundColor: (index: number) => string) =>
		data.map((section, index) => (
			<section id={section.id} key={section.id} className={`w-full ${getBackgroundColor(index)}`}>
				<div
					className={clsx(
						"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
						language === "ar" && "text-right",
					)}>
					<div className={clsx("w-full flex", language === "ar" && "justify-start")}>
						<Title className="max-w-fit">{section.title}</Title>
					</div>
					<span className="text-lg">{section.description}</span>
					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
						{section.bullets.map((bullet) => (
							<div key={bullet.title} className={clsx("flex gap-8")}>
								<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
									{bullet.icon && <bullet.icon className="text-mti-rose-light w-6 h-6" />}
								</div>
								<div className="flex flex-col gap-2">
									<span className="text-lg font-bold text-mti-rose-light">{bullet.title}</span>
									<ul className="list-disc gap-2 flex flex-col">
										{bullet.values?.map((value) => (
											<li key={value}>{value}</li>
										))}
									</ul>
								</div>
							</div>
						))}
					</div>
				</div>
			</section>
		));

	return (
		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
			<Navbar currentPage="/services" 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>
			{renderStruct(struct, (index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`)}
			<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 className="max-w-fit">{data.CorporateEducationalInstitutions}</Title>
				</div>
			</section>
			{renderStruct(final_struct, (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`)}
			<Footer language={language} />
		</main>
	);
}
