"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
/**
 * Sortable table column header with accessible sort indicators.
 *
 * Uses `aria-sort` to communicate sort state to screen readers.
 * The sort indicator uses both an icon and text direction so the
 * sort state is never conveyed by icon alone.
 */
export function ColumnHeader({ label, sortable, sortDirection, onSort, className, }) {
    const ariaSort = sortDirection === "asc"
        ? "ascending"
        : sortDirection === "desc"
            ? "descending"
            : undefined;
    if (!sortable) {
        return (_jsx("th", { scope: "col", className: cn("px-3 py-2 text-left text-xs font-medium text-muted-foreground", className), children: label }));
    }
    return (_jsx("th", { scope: "col", "aria-sort": ariaSort, className: cn("px-3 py-2 text-left text-xs font-medium text-muted-foreground", className), children: _jsxs("button", { type: "button", onClick: onSort, className: cn("inline-flex items-center gap-1 rounded-sm px-0.5 py-0.5 -mx-0.5", "hover:text-foreground transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", sortDirection && "text-foreground"), children: [label, _jsx(SortIndicator, { direction: sortDirection })] }) }));
}
function SortIndicator({ direction, }) {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: cn("shrink-0 transition-transform", !direction && "opacity-0 group-hover:opacity-40", direction === "desc" && "rotate-180"), children: _jsx("path", { d: "M6 2.5v7M3 6.5l3-4 3 4" }) }));
}
//# sourceMappingURL=ColumnHeader.js.map