import { insert_nbsp } from "@sealcode/jdd";
import type { Context } from "koa";
import { icon } from "src/back/icons.js";
import { TempstreamJSX } from "tempstream";

const icons = [
	{ name: "mastodon", url: "https://mastodon.strona-czynna.pl/@czynna" },
	{ name: "peertube", url: "https://video.strona-czynna.pl/" },
	{ name: "matrix", url: "https://matrix.to/#/#strona-czynna:matriks.chat" },
	{ name: "telegram", url: "https://t.me/+JQl6ryW3_Ho5MDY0" },
	{ name: "instagram", url: "https://www.instagram.com/strona_czynna" },
	{ name: "twitter", url: "https://x.com/strona_czynna" },
	{ name: "tiktok", url: "https://www.tiktok.com/@stronaczynna" },
];

export default async function footer(ctx: Context) {
	const { items: navbar_items } = await ctx.$app.collections["navbar-links"]
		.list(ctx.$context)
		.fetch();
	const linkData = navbar_items.map((e) => ({
		text: e.get("label"),
		url: e.get("href"),
	}));

	return (
		<footer>
			<ul class="footer__navlinks">
				<li>
					<a href="/">{ctx.$app.manifest.name}</a>
				</li>
				{linkData.map((link) => (
					<li>
						<a href={link.url}>{insert_nbsp(link.text || "")}</a>
					</li>
				))}
			</ul>
			<div class="wrapper">
				<div class="footer__social_media_icons">
					{icons.map((icon_data) => (
						<a href={icon_data.url} title={icon_data.name}>
							{icon(icon_data.name)}
						</a>
					))}
				</div>
				<div class="footer__attribution">
					Implented using open technologies from{" "}
					<a href="https://www.sealcode.it/">Sealcode</a>
				</div>
			</div>
		</footer>
	);
}