import type { SortDirection } from "@/utils/sort.util";
import { sortIndicator } from "@/utils/sort.util";

const thButtonClass =
  "inline-flex items-center gap-1 font-inherit uppercase tracking-wide hover:text-slate-700 dark:hover:text-slate-200";

export function SortableTh({
  column,
  label,
  sort,
  onSort,
  className = "px-4 py-3",
}: {
  column: string;
  label: string;
  sort: { column: string; direction: SortDirection } | null;
  onSort: (column: string) => void;
  className?: string;
}) {
  return (
    <th className={className}>
      <button type="button" className={thButtonClass} onClick={() => onSort(column)}>
        {label}
        {sortIndicator(sort, column)}
      </button>
    </th>
  );
}
