import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Text } from "../../../components/atoms/Text";
import { cn } from "../../../utils/cn";
export function DataTable({ data, columns, loading = false, onRowClick, actions, className, }) {
    if (loading) {
        return (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-neutral-900 dark:border-white mb-4" }), _jsx(Text, { variant: "body", className: "text-neutral-600 dark:text-neutral-400", children: "Loading..." })] }) }));
    }
    if (data.length === 0) {
        return (_jsx("div", { className: "text-center py-12", children: _jsx(Text, { variant: "body", className: "text-neutral-600 dark:text-neutral-400", children: "No data available" }) }));
    }
    return (_jsx("div", { className: cn("overflow-x-auto", className), role: "region", "aria-label": "Data table", children: _jsxs("table", { className: "w-full border-collapse", role: "table", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-neutral-200 dark:border-neutral-700", children: [columns.map((column) => (_jsx("th", { scope: "col", className: "px-4 py-3 text-left text-sm font-semibold text-neutral-700 dark:text-neutral-300", children: column.header }, column.key))), actions && (_jsx("th", { scope: "col", className: "px-4 py-3 text-left text-sm font-semibold text-neutral-700 dark:text-neutral-300", children: "Actions" }))] }) }), _jsx("tbody", { children: data.map((item, index) => (_jsxs("tr", { onClick: () => onRowClick?.(item), onKeyDown: (e) => {
                            if (onRowClick && (e.key === "Enter" || e.key === " ")) {
                                e.preventDefault();
                                onRowClick(item);
                            }
                        }, tabIndex: onRowClick ? 0 : undefined, role: onRowClick ? "button" : "row", "aria-label": `Row ${index + 1}`, className: cn("border-b border-neutral-200 dark:border-neutral-700", onRowClick &&
                            "cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500"), children: [columns.map((column) => (_jsx("td", { className: "px-4 py-3 text-sm text-neutral-900 dark:text-white", children: column.render
                                    ? column.render(item)
                                    : item[column.key]?.toString() || "-" }, column.key))), actions && (_jsx("td", { className: "px-4 py-3", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: actions(item) }))] }, index))) })] }) }));
}
export default DataTable;
