"use client";

import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
import { TableHead } from "@/components/ui/table";

interface SortableHeaderProps<T extends string> {
  column: T;
  label: string;
  sortBy: T;
  sortOrder: "asc" | "desc";
  onSort: (col: T) => void;
  className?: string;
}

function SortIcon<T extends string>({
  column,
  sortBy,
  sortOrder,
}: Pick<SortableHeaderProps<T>, "column" | "sortBy" | "sortOrder">) {
  if (sortBy !== column)
    return <ArrowUpDown className="text-muted-foreground/40 ml-1.5 h-3.5 w-3.5" />;
  return sortOrder === "asc" ? (
    <ArrowUp className="text-primary ml-1.5 h-3.5 w-3.5" />
  ) : (
    <ArrowDown className="text-primary ml-1.5 h-3.5 w-3.5" />
  );
}

export function SortableHeader<T extends string>({
  column,
  label,
  sortBy,
  sortOrder,
  onSort,
  className,
}: SortableHeaderProps<T>) {
  return (
    <TableHead className={className}>
      <button
        onClick={() => onSort(column)}
        className="hover:text-foreground flex items-center gap-0 font-medium transition-colors"
        aria-label={`Sort by ${label}`}
      >
        {label}
        <SortIcon column={column} sortBy={sortBy} sortOrder={sortOrder} />
      </button>
    </TableHead>
  );
}