import Link from "next/link";
import {BiLogoFacebook} from "react-icons/bi";
import {BsInstagram, BsTwitter} from "react-icons/bs";
import translation from "@/translation/footer.json";
import clsx from "clsx";

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

export default function Footer({language}: Props) {
	return (
		<>
			<section className="bg-mti-gray-seasalt w-full">
				<div
					className={clsx(
						"w-full py-10 px-8 md:px-28 flex flex-col md:justify-between gap-8 lg:container lg:mx-auto",
						language === "ar" ? "md:flex-row-reverse" : "md:flex-row",
					)}>
					<div className="flex flex-col gap-4">
						<span className="font-bold text-xl">{translation.navigation.text[language]}</span>
						<div className="flex flex-col gap-2">
							<Link href="/about">{translation.navigation.why_us[language]}</Link>
							<Link href="/about#capabilities">{translation.navigation.capabilities[language]}</Link>
							<Link href="/about#expertise">{translation.navigation.expertise[language]}</Link>
							<Link href="/history">{translation.navigation.history[language]}</Link>
							<Link href="/contact">{translation.navigation.contact[language]}</Link>
						</div>
					</div>
					<div className="flex flex-col gap-4">
						<span className="font-bold text-xl">{translation.services.text[language]}</span>
						<div className="flex flex-col gap-2">
							<Link href="#benefits">{translation.services.encoach_benefits[language]}</Link>
							<Link href="#testimonials">{translation.services.student_testimonials[language]}</Link>
						</div>
					</div>
					<div className="flex flex-col gap-4">
						<span className="font-bold text-xl">{translation.about.text[language]}</span>
						<div className="flex flex-col gap-2">
							<Link href="/terms">{translation.about.terms[language]}</Link>
							<Link href="/privacy-policy">{translation.about.privacy_policy[language]}</Link>
							<Link href="/about">{translation.about.text[language]}</Link>
						</div>
					</div>
					<div className="flex flex-col gap-4">
						<span className="font-bold text-xl">{translation.get_in_touch.title[language]}</span>
						<div className="flex flex-col gap-4">
							<span className="max-w-[280px]">{translation.get_in_touch.text[language]}</span>
							<div className={clsx("flex gap-6 items-center", language === "ar" && "flex-row-reverse justify-start")}>
								<Link
									href="https://facebook.com"
									className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
									<BiLogoFacebook className="w-6 h-6" />
								</Link>
								<Link
									href="https://twitter.com"
									className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
									<BsTwitter className="w-5 h-5" />
								</Link>
								<Link
									href="https://instagram.com"
									className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
									<BsInstagram className="w-5 h-5" />
								</Link>
							</div>
						</div>
					</div>
				</div>
			</section>

			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">
				© {translation.copyright[language]}
			</footer>
		</>
	);
}
