import type { ReactNode } from "react";
import type { SortDirection } from "../hooks/useSortable";

export default function SortableTh<T>({
  label,
  sortKeyName,
  activeKey,
  direction,
  onSort,
  className,
}: {
  label: ReactNode;
  sortKeyName: keyof T;
  activeKey: keyof T | undefined;
  direction: SortDirection;
  onSort: (key: keyof T) => void;
  className?: string;
}) {
  const active = activeKey === sortKeyName;
  return (
    <th
      className={className}
      role="button"
      style={{ cursor: "pointer", userSelect: "none", whiteSpace: "nowrap" }}
      onClick={() => onSort(sortKeyName)}
    >
      {label}
      <span className={active ? "" : "text-secondary"} style={{ marginLeft: 4, opacity: active ? 1 : 0.4 }}>
        {active ? (direction === "asc" ? "▲" : "▼") : "↕"}
      </span>
    </th>
  );
}