use leptos::prelude::*;
use leptos::ev;
use super::unified::TableColumn;

#[component]
pub fn TableClient(
    columns: Vec<TableColumn>,
    rows: Vec<Vec<String>>,
    on_sort: Callback<String>,
    class: &'static str,
) -> impl IntoView {
    view! {
        <div class={format!("ds-card overflow-hidden {}", class)}>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-white/5 border-b border-white/10">
                        <tr>
                            {columns.iter().map(|col| {
                                let col_clone = col.clone();
                                let handle_sort = move |_: ev::MouseEvent| {
                                    if col_clone.sortable {
                                        on_sort.run(col_clone.key.clone());
                                    }
                                };

                                let header_class = if col.sortable {
                                    "px-6 py-3 text-left text-sm font-medium text-white cursor-pointer hover:bg-white/8"
                                } else {
                                    "px-6 py-3 text-left text-sm font-medium text-white"
                                };

                                view! {
                                    <th
                                        class=header_class
                                        on:click=handle_sort
                                    >
                                        <div class="flex items-center gap-2">
                                            {col.header.clone()}
                                            {col.sortable.then(|| view! { <span class="text-white/40">"↕"</span> })}
                                        </div>
                                    </th>
                                }
                            }).collect::<Vec<_>>()}
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/10">
                        {rows.into_iter().map(|row| {
                            view! {
                                <tr class="hover:bg-white/5 transition-colors">
                                    {row.into_iter().map(|cell| {
                                        view! {
                                            <td class="px-6 py-4 text-sm text-white/80">
                                                {cell}
                                            </td>
                                        }
                                    }).collect::<Vec<_>>()}
                                </tr>
                            }
                        }).collect::<Vec<_>>()}
                    </tbody>
                </table>
            </div>
        </div>
    }
}
