import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
import type { SortDir } from "@/lib/use-sort";

/**
 * Plain-<th> sortable header for native tables (Screener, Reports).
 * For shadcn <Table> use the SortableTh already defined in
 * `src/routes/_app.signals.tsx`.
 */
export function SortTh({
  label,
  active,
  dir,
  onClick,
  align = "left",
  className = "",
  title,
}: {
  label: string;
  active: boolean;
  dir: SortDir;
  onClick: () => void;
  align?: "left" | "right" | "center";
  className?: string;
  title?: string;
}) {
  const alignCls = align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
  const Icon = active ? (dir === "asc" ? ArrowUp : ArrowDown) : ArrowUpDown;
  return (
    <th
      scope="col"
      aria-sort={active ? (dir === "asc" ? "ascending" : "descending") : "none"}
      className={`${alignCls} px-4 py-3 ${className}`}
    >
      <button
        type="button"
        onClick={onClick}
        title={title ?? `Sort by ${label}`}
        className={`inline-flex items-center gap-1 uppercase tracking-wider transition ${
          active ? "text-primary" : "text-muted-foreground hover:text-foreground"
        }`}
      >
        {label}
        <Icon className="h-3 w-3" aria-hidden />
      </button>
    </th>
  );
}