"use client";

import { TableHead } from "@/components/ui/table";
import { cn } from "@/lib/utils";
import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
import type { SortState } from "@/hooks/use-table-sort";

interface SortableTableHeadProps {
  column: string;
  label: string;
  sort: SortState;
  onToggle: (column: string) => void;
  className?: string;
}

export function SortableTableHead({
  column,
  label,
  sort,
  onToggle,
  className = "",
}: SortableTableHeadProps) {
  const isActive = sort.column === column;

  return (
    <TableHead
      className={cn("cursor-pointer select-none hover:text-foreground transition-colors", className)}
      onClick={() => onToggle(column)}
    >
      <span className={cn(
        "inline-flex items-center gap-1",
        className?.includes("text-right") ? "ml-auto" : ""
      )}>
        {label}
        {isActive && sort.direction === "asc" ? (
          <ArrowUp className="h-3 w-3 text-primary" />
        ) : isActive && sort.direction === "desc" ? (
          <ArrowDown className="h-3 w-3 text-primary" />
        ) : (
          <ArrowUpDown className="h-3 w-3 opacity-30" />
        )}
      </span>
    </TableHead>
  );
}