---
interface Props {
    page: number;
    totalPages: number;
    urlTemplate: string;
}

const { page, totalPages, urlTemplate } = Astro.props;
---

<div class="flex flex-row gap-2">
    { totalPages < 7 && (
        <>
        { [...Array(totalPages)].map((_: number, i: number) => (
            <a
                href={`${i + 1 === 1 ? urlTemplate : `${urlTemplate}/${i + 1}`}`}
                class={`flex select-none hover:cursor-pointer text-lg justify-center items-center 
                    ${(i + 1 === page) ? "bg-(--ptc) text-(--ptt)" : "bg-neutral-200"} hover:bg-(--stc) hover:text-(--stt) duration-300 shadow-md rounded-full w-12 h-12`.trim()}>
                <span>{i + 1}</span>
            </a>
        )) }
        </>
    ) }
</div>