<div class="rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-x-auto">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 min-w-max">
    <thead class="text-xs text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
        <tr>
            @foreach (var column in Columns)
            {
                <th scope="col" class="px-4 py-3">
                    @if (column.Sortable)
                    {
                        <button class="flex items-center hover:text-gray-900 dark:hover:text-white" @onclick="() => OnSort(column.PropertyName!)">
                            @column.Title
                            <span class="ml-1">
                                @if (SortColumn == column.PropertyName)
                                {
                                    @if (SortDirection == SortDirection.Ascending)
                                    {
                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                        </svg>
                                    }
                                    else
                                    {
                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                        </svg>
                                    }
                                }
                            </span>
                        </button>
                    }
                    else
                    {
                        @column.Title
                    }
                </th>
            }
        </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
        @ChildContent
    </tbody>
</table>
</div>

@code {
    /// <summary>
    /// Gets or sets the columns to display in the table.
    /// </summary>
    [Parameter] public List<TableColumn> Columns { get; set; } = new();

    /// <summary>
    /// Gets or sets the child content of the table.
    /// </summary>
    [Parameter] public RenderFragment ChildContent { get; set; } = null!;

    /// <summary>
    /// Gets or sets the column to sort by.
    /// </summary>
    [Parameter] public string SortColumn { get; set; } = string.Empty;

    /// <summary>
    /// Gets or sets the direction to sort by.
    /// </summary>
    [Parameter] public SortDirection SortDirection { get; set; }

    /// <summary>
    /// Gets or sets the event to invoke when the sort changes.
    /// </summary>
    [Parameter] public EventCallback<(string, SortDirection)> OnSortChanged { get; set; }

    /// <summary>
    /// Sorts the list of items by the specified column and direction.
    /// </summary>
    public static IEnumerable<T> SortListByProperty<T, TKey>(IEnumerable<T> source, Func<T, TKey> keySelector, SortDirection direction)
    {
        return direction == SortDirection.Ascending
            ? source.OrderBy(keySelector)
            : source.OrderByDescending(keySelector);
    }

    private async Task OnSort(string columnName)
    {
        if (SortColumn == columnName)
        {
            SortDirection = SortDirection == SortDirection.Ascending
                ? SortDirection.Descending
                : SortDirection.Ascending;
        }
        else
        {
            SortColumn = columnName;
            SortDirection = SortDirection.Ascending;
        }

        await OnSortChanged.InvokeAsync((SortColumn, SortDirection));
    }
}
