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";
import FooterSection from "@/types/cms/footer";

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

interface FooterLinkProps {
	language: "en" | "ar";
	children: string;
	href: string;
}

const FooterLink = ({language, href, children}: FooterLinkProps) => {
	return <Link href={`${language === "ar" ? "/ar" : ""}${href}`}>{children}</Link>;
};

export default function Footer({language, data}: 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">{data.Navigation.Text}</span>
						<div className="flex flex-col gap-2">
							<FooterLink language={language} href={`/about`}>
								{data.Navigation.WhyUs}
							</FooterLink>
							<FooterLink language={language} href={`/about#capabilities`}>
								{data.Navigation.Capabilities}
							</FooterLink>
							<FooterLink language={language} href={`/about#expertise`}>
								{data.Navigation.Expertise}
							</FooterLink>
							<FooterLink language={language} href="/history">
								{data.Navigation.History}
							</FooterLink>
							<FooterLink language={language} href="/contact">
								{data.Navigation.Contact}
							</FooterLink>
						</div>
					</div>
					<div className="flex flex-col gap-4">
						<span className="font-bold text-xl">{data.Services.Text}</span>
						<div className="flex flex-col gap-2">
							<FooterLink language={language} href="/#benefits">
								{data.Services.EnCoachBenefits}
							</FooterLink>
							<FooterLink language={language} href="#testimonials">
								{data.Services.StudentTestimonials}
							</FooterLink>
						</div>
					</div>
					<div className="flex flex-col gap-4">
						<span className="font-bold text-xl">{data.About.Text}</span>
						<div className="flex flex-col gap-2">
							<FooterLink language={language} href="/terms">
								{data.About.Terms}
							</FooterLink>
							<FooterLink language={language} href="/privacy-policy">
								{data.About.PrivacyPolicy}
							</FooterLink>
							<FooterLink language={language} href="/about">
								{data.About.Text}
							</FooterLink>
						</div>
					</div>
					<div className="flex flex-col gap-4">
						<span className="font-bold text-xl">{data.GetInTouch.Title}</span>
						<div className="flex flex-col gap-4">
							<span className="max-w-[280px]">{data.GetInTouch.Text}</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">© {data.Copyright}</footer>
		</>
	);
}
