Footer

"use client";

import { useConfig } from "@/components/fumastudio/config-provider";
import Link from "next/link";

export const DocsFooter = () => {
	const config = useConfig();
	const socialLinks = config?.socials;

	return (
		<footer className="flex justify-between gap-12 pt-10 leading-6 border-t border-gray-100 sm:flex dark:border-gray-800/50 pb-28 mt-14">
			<div className="flex flex-wrap gap-6">
				{socialLinks &&
					socialLinks.map((social) => (
						<Link
							key={social.href}
							href={social.href}
							target="_blank"
							rel="noopener noreferrer"
							className="h-fit">
							<span className="sr-only">
								{social.label}
							</span>
							<svg
								className="w-5 h-5 mask-repeat bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400"
								style={{
									maskImage: `url("${social.iconUrl}")`,
									WebkitMaskImage: `url("${social.iconUrl}")`,
								}}
							/>
						</Link>
					))}
			</div>

			<div className="flex items-center justify-between">
				<div className="sm:flex">{config?.poweredBy}</div>
			</div>
		</footer>
	);
};