package baseview

type FooterItem struct {
	Name string
	Href string
}

// Specify the links to show in the footer
func getFooterItems() []FooterItem {
	return []FooterItem{
		{Name: "About", Href: "/about"},
	}
}

// Returns the template fragment for the Footer
templ Footer() {
	<footer class="bg-mantle mt-10">
		<div class="relative mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
			@backToTopButton()
			<div class="lg:flex lg:items-end lg:justify-between">
				@footerBranding()
				@footerLinks(getFooterItems())
			</div>
			<div class="lg:flex lg:items-end lg:justify-between">
				@footerCopyright()
			</div>
		</div>
	</footer>
	<script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
	<script>
		kofiWidgetOverlay.draw('haelnorr', {
			'type': 'floating-chat',
			'floating-chat.donateButton.text': 'Support me',
			'floating-chat.donateButton.background-color': '#313244',
			'floating-chat.donateButton.text-color': '#ccd5f3'
		});
	</script>
}

templ backToTopButton() {
	<div class="absolute end-4 top-4 sm:end-6 lg:end-8">
		<button
			class="inline-block rounded-full bg-teal p-2 text-crust
                shadow-sm transition hover:bg-teal/75 hover:cursor-pointer"
			onclick="document.getElementById('page-viewport').scrollTo({ top: 0, behavior: 'smooth' })"
		>
			<span class="sr-only">Back to top</span>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="size-5"
				viewBox="0 0 20 20"
				fill="currentColor"
			>
				<path
					fill-rule="evenodd"
					d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 
                        3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 
                        4a1 1 0 010 1.414z"
					clip-rule="evenodd"
				></path>
			</svg>
		</button>
	</div>
}

templ footerBranding() {
	<div>
		<div class="flex justify-center text-text lg:justify-start pb-4">
			<span class="text-2xl">OSL Stats</span>
		</div>
	</div>
}

templ footerLinks(items []FooterItem) {
	<ul
		class="mt-12 flex flex-wrap justify-center gap-6 md:gap-8
            lg:mt-0 lg:justify-end lg:gap-12"
	>
		for _, item := range items {
			<li>
				<a
					class="transition hover:text-subtext1"
					href={ templ.SafeURL(item.Href) }
				>
					{ item.Name }
				</a>
			</li>
		}
	</ul>
}

templ footerCopyright() {
	<div>
		<p class="mt-4 text-center text-sm text-overlay0">
			by Haelnorr
		</p>
	</div>
}