import { SITE_NAME } from "@/lib/constants";
import { FaFacebook, FaYoutube } from "react-icons/fa";
import Logo from "./logo";

const sections = [
	{
		title: "Resources",
		links: [
			{ name: "Accueil", href: "/" },
			{ name: "Planning", href: "/planning" },
			{ name: "À propos", href: "/about" },
			{ name: "Galerie", href: "/gallery" },
			{ name: "Blog", href: "/blogs" },
			{ name: "Contact", href: "/contact" },
		],
	},
];

const Footer = () => {
	return (
		<section className="p-16">
			<div className="">
				<footer>
					<div className="flex flex-col items-center justify-between gap-10 text-center lg:flex-row lg:text-left">
						<div className="flex w-full max-w-96 shrink flex-col items-center justify-between gap-6 lg:items-start">
							<div>
								<span className="flex items-center justify-center gap-4 lg:justify-start">
									<Logo className="h-11 w-11" />
									<p className="text-3xl font-semibold">
										{SITE_NAME}
									</p>
								</span>
								<p className="mt-6 text-sm text-muted-foreground"></p>
							</div>
							<ul className="flex items-center space-x-6 text-muted-foreground">
								<li className="font-medium hover:text-primary">
									<a href="https://www.facebook.com/wingtsun.picardie">
										<FaFacebook className="size-6" />
									</a>
								</li>
								<li className="font-medium hover:text-primary">
									<a href="https://www.youtube.com/@WingTsunPicardie">
										<FaYoutube className="size-6" />
									</a>
								</li>
							</ul>
						</div>
						<div
							className={`grid grid-cols-[${sections.length}] gap-6 lg:gap-20`}
						>
							{sections.map((section, sectionIdx) => (
								<div key={sectionIdx}>
									<h3 className="mb-6 font-bold">
										{section.title}
									</h3>
									<ul className="space-y-4 text-sm text-muted-foreground">
										{section.links.map((link, linkIdx) => (
											<li
												key={linkIdx}
												className="font-medium hover:text-primary"
											>
												<a href={link.href}>
													{link.name}
												</a>
											</li>
										))}
									</ul>
								</div>
							))}
						</div>
					</div>
					<div className="mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-center text-sm font-medium text-muted-foreground lg:flex-row lg:items-center lg:text-left">
						<p>
							© {new Date(Date.now()).getFullYear()} {SITE_NAME}.
							Tous droits réservés.
						</p>
						<ul className="flex justify-center gap-4 lg:justify-start">
							<li className="hover:text-primary">
								<a href="#"> Terms and Conditions</a>
							</li>
							<li className="hover:text-primary">
								<a href="#"> Privacy Policy</a>
							</li>
						</ul>
					</div>
				</footer>
			</div>
		</section>
	);
};

export default Footer;