---
import {type Page} from 'astro';
type Props = { page: Page<unknown> }

const {page} = Astro.props;

const {url, lastPage, currentPage} = page;
const {prev, next} = url;
---
<div class="flex justify-center my-3">
    <div class="grid grid-cols-3 gap-x-1 place-items-center">
        <a class:list={
          ['col-start-1 border-2 hover:border-primary-accent border-primary-alternative flex items-center',
           ' justify-center size-8 rounded-full', {'hidden': !prev}]
        } href={prev}> <span class="i-mdi-arrow-left"> </ span>
        </a>

      {(lastPage !== currentPage || lastPage > 1) &&
       <span class="col-start-2 mx-1">{currentPage}&hairsp;/&hairsp;{lastPage} </span>}

        <a class:list={
          ['col-start-3 border-2 hover:border-primary-accent border-primary-alternative flex items-center' +
           ' justify-center size-8 rounded-full', {'hidden': !next}]
        }
           href={next}><span class="i-mdi-arrow-right"></span>
        </a>
    </div>
</div>