@if (TotalRecords > PageSize)
{
    <!-- Simple mobile-friendly pagination component -->
    <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>
}

@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)
    {
        var newPage = CurrentPage + change;
        
        if (newPage < 1)
        {
            newPage = 1;
        }
        else if (newPage > PageCount)
        {
            newPage = PageCount;
        }
        
        if (newPage != CurrentPage)
        {
            CurrentPage = newPage;
            OnPageChanged.InvokeAsync(CurrentPage);
        }
    }
}