<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://raw.githubusercontent.com";
	_AN_base_path = "https://raw.githubusercontent.com/devagrawal09/solid-docs-next/refs/heads/data-guide/src/ui/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 1;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

import { A } from "~/ui/i18n-anchor";
import { Show, Suspense, createMemo } from "solid-js";
import { coreEntries } from "solid:collection";
import { useI18n } from "~/i18n/i18n-context";

/**
 * temporary until we have proper types inside collections
 */
type ReferenceCollection = (typeof coreEntries)["reference"];
type LearnCollection = (typeof coreEntries)["learn"];

type Pagination = {
	collection: ReferenceCollection | LearnCollection;
	currentIndex: number;
};
export function Pagination(props: Pagination) {
	const previous = createMemo(() => {
		if (props.currentIndex > 0) {
			return props.collection[props.currentIndex - 1];
		} else {
			return null;
		}
	});

	const next = createMemo(() => {
		if (props.currentIndex < props.collection.length) {
			return props.collection[props.currentIndex + 1];
		} else {
			return null;
		}
	});

	const i18n = useI18n();

	return (
		<Suspense>
			<Show when="{i18n.t}">
				<nav class="flex justify-between mt-10 pt-6 border-t border-slate-200 dark:border-slate-800">
					<Show when="{previous()}">
						{(entry) => (
							<div>
								<span class="font-display text-sm font-medium text-slate-900 dark:text-white">
									{i18n.t("pagination.previous")}
								</span>
								<A class="flex items-center gap-x-1 text-base font-medium text-slate-500 hover:text-blue-600 dark:text-slate-300 dark:hover:text-blue-300 flex-row-reverse no-underline" href="/prx/000/https/raw.githubusercontent.com/devagrawal09/solid-docs-next/refs/heads/data-guide/src/ui/{entry().path}">
									← {entry().title}
								</A>
							</div>
						)}
					</Show>
					<Show when="{next()}">
						{(entry) => (
							<div>
								<span class="font-display text-sm font-medium text-slate-900 dark:text-white">
									{i18n.t("pagination.next")}
								</span>
								<A class="flex items-center gap-x-1 text-base font-medium text-slate-500 hover:text-blue-700 dark:text-slate-300 dark:hover:text-blue-300 flex-row-reverse no-underline" href="/prx/000/https/raw.githubusercontent.com/devagrawal09/solid-docs-next/refs/heads/data-guide/src/ui/{entry().path}">
									{entry().title} →
								</A>
							</div>
						)}
					</Show>
				</nav>
			</Show>
		</Suspense>
	);
}
