@if (TotalRecords > PageSize)
{
    <!-- Desktop pagination -->
    <div class="hidden md:block">
        <nav aria-label="Page navigation" class="mt-4 flex justify-end mb-5">
            <ul class="flex space-x-2">
                <!-- Previous page button -->
                <li class="@(CurrentPage == 1 ? "opacity-50 cursor-not-allowed" : "")">
                    <a class="px-3 py-2 bg-primary-100 text-primary-700 border border-primary-300 rounded hover:bg-primary-200 transition duration-300 shadow-sm" href="javascript:void(0)" @onclick="() => ChangePage(-1)">Previous</a>
                </li>
                @for (var i = 1; i <= PageCount; i++)
                {
                    var pageNum = i;
                    // Show first page, last page, and pages around current page
                    if (i != 1 && i != PageCount && Math.Abs(CurrentPage - i) > 2)
                    {
                        // Don't render intermediate pages when there are many pages
                        continue;
                    }
                    <!-- Individual page number buttons -->
                    <li>
                        <a class="px-3 py-2 @(CurrentPage == pageNum ? "bg-primary-600 text-white" : "bg-primary-100 text-primary-700") border border-primary-300 rounded hover:bg-primary-200 transition duration-300 shadow-sm" href="javascript:void(0)" @onclick="() => SetPage(pageNum)">@pageNum</a>
                    </li>
                }
                <!-- Next page button -->
                <li class="@(CurrentPage == PageCount ? "opacity-50 cursor-not-allowed" : "")">
                    <a class="px-3 py-2 bg-primary-100 text-primary-700 border border-primary-300 rounded hover:bg-primary-200 transition duration-300 shadow-sm" href="javascript:void(0)" @onclick="() => ChangePage(1)">Next</a>
                </li>
            </ul>
        </nav>
    </div>
    
    <!-- Mobile pagination -->
    <div class="block md:hidden">
        <nav aria-label="Page navigation" class="mt-4 flex justify-center mb-5">
            <ul class="flex items-center space-x-2">
                <!-- Previous page button -->
                <li class="@(CurrentPage == 1 ? "opacity-50 cursor-not-allowed" : "")">
                    <button 
                        @onclick="() => ChangePage(-1)"
                        disabled="@(CurrentPage == 1)"
                        class="px-3 py-2 bg-primary-100 text-primary-700 border border-primary-300 rounded hover:bg-primary-200 transition duration-300 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                </li>
                
                <!-- Current page indicator -->
                <li>
                    <span class="px-3 py-2 bg-primary-600 text-white border border-primary-300 rounded shadow-sm">
                        @CurrentPage / @PageCount
                    </span>
                </li>
                
                <!-- Next page button -->
                <li class="@(CurrentPage == PageCount ? "opacity-50 cursor-not-allowed" : "")">
                    <button 
                        @onclick="() => ChangePage(1)"
                        disabled="@(CurrentPage == PageCount)"
                        class="px-3 py-2 bg-primary-100 text-primary-700 border border-primary-300 rounded hover:bg-primary-200 transition duration-300 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                </li>
            </ul>
        </nav>
    </div>
}

@code {
    /// <summary>
    /// The current page number.
    /// </summary>
    [Parameter] public int CurrentPage { get; set; } = 1;

    /// <summary>
    /// The number of items to display per page.
    /// </summary>
    [Parameter] public int PageSize { get; set; } = 10;

    /// <summary>
    /// The total number of records in the dataset.
    /// </summary>
    [Parameter] public int TotalRecords { get; set; }

    /// <summary>
    /// Event callback triggered when the page is changed.
    /// </summary>
    [Parameter] public EventCallback<int> OnPageChanged { get; set; }

    /// <summary>
    /// Calculates the total number of pages based on TotalRecords and PageSize.
    /// </summary>
    private int PageCount => (TotalRecords + PageSize - 1) / PageSize;

    /// <summary>
    /// Changes the current page by the specified amount.
    /// </summary>
    /// <param name="change">The number of pages to change by (positive or negative).</param>
    private void ChangePage(int change)
    {
        SetPage(CurrentPage + change);
    }

    /// <summary>
    /// Sets the current page to the specified page number.
    /// </summary>
    /// <param name="pageNumber">The page number to set.</param>
    private void SetPage(int pageNumber)
    {
        if (pageNumber < 1)
        {
            CurrentPage = 1;
        }
        else if (pageNumber > PageCount)
        {
            CurrentPage = PageCount;
        }
        else
        {
            CurrentPage = pageNumber;
        }

        OnPageChanged.InvokeAsync(CurrentPage);
    }
}