---
export interface PaginationProps {
    currentPage: number;
    totalPages: number;
    baseUrl: string;
    showPrevNext?: boolean;
}

const {
    currentPage,
    totalPages,
    baseUrl,
    showPrevNext = true
} = Astro.props as PaginationProps;

const getPageUrl = (page: number) => {
    if (baseUrl === '/documents' || baseUrl === '/faq') {
        if (page === 1) return baseUrl;
        return `${baseUrl}?page=${page}`;
    }
    return `${baseUrl}/page/${page}`;
};

const getPages = () => {
    const pages: (number | string)[] = [];
    for (let i = 1; i <= totalPages; i++) {
        if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) {
            pages.push(i);
        } else if (pages[pages.length - 1] !== '...') {
            pages.push('...');
        }
    }
    return pages;
};
---

<nav class="pagination">
    <div class="pagination__wrapper">
        {showPrevNext && (
            <!-- Кнопка Назад -->
            <a
                href={currentPage > 1 ? getPageUrl(currentPage - 1) : '#'}
                class={`pagination__btn pagination__btn--prev ${currentPage === 1 ? 'disabled' : ''}`}
                aria-disabled={currentPage === 1}
            >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="m15 18-6-6 6-6"/>
                </svg>
            </a>
        )}

        <!-- Номера страниц -->
        <div class="pagination__pages">
            {getPages().map((page) => (
                page === '...' ? (
                    <span class="pagination__ellipsis">…</span>
                ) : (
                    <a
                        href={getPageUrl(page as number)}
                        class={`pagination__page ${page === currentPage ? 'active' : ''}`}
                        aria-current={page === currentPage ? 'page' : undefined}
                    >
                        {page}
                    </a>
                )
            ))}
        </div>

        {showPrevNext && (
            <!-- Кнопка Вперед -->
            <a
                href={currentPage < totalPages ? getPageUrl(currentPage + 1) : '#'}
                class={`pagination__btn pagination__btn--next ${currentPage === totalPages ? 'disabled' : ''}`}
                aria-disabled={currentPage === totalPages}
            >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="m9 18 6-6-6-6"/>
                </svg>
            </a>
        )}
    </div>
</nav>

<style>
    .pagination {
        padding: 3rem 0;
        display: flex;
        justify-content: center;
    }

    .pagination__wrapper {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .pagination__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.75rem;
        border: 2px solid #e2e8f0;
        background: #ffffff;
        color: #64748b;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
    }

    .pagination__btn:not(.disabled):hover {
        border-color: #d4af37;
        color: #d4af37;
        transform: translateY(-2px);
    }

    .pagination__btn.disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

    .pagination__btn svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .pagination__pages {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .pagination__page {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.75rem;
        border: 2px solid transparent;
        background: #ffffff;
        color: #64748b;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pagination__page:hover {
        border-color: #d4af37;
        color: #d4af37;
    }

    .pagination__page.active {
        background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
        border-color: #d4af37;
        color: #1e293b;
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    }

    .pagination__ellipsis {
        color: #94a3b8;
        padding: 0 0.25rem;
        font-size: 1.25rem;
        user-select: none;
    }

    @media (max-width: 640px) {
        .pagination__pages {
            gap: 0.25rem;
        }

        .pagination__page,
        .pagination__btn {
            width: 2.25rem;
            height: 2.25rem;
            min-width: 2.25rem;
        }
    }
</style>
