"use client";

import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/** Sortable column header for TanStack tables: click cycles ascending / descending, with the direction as an icon. */
export function SortHeader({
  label,
  column,
  align = "left",
}: {
  label: string;
  column: { getIsSorted: () => false | "asc" | "desc"; toggleSorting: (desc?: boolean) => void };
  align?: "left" | "right";
}) {
  const s = column.getIsSorted();
  const Icon = s === "asc" ? ArrowUpIcon : s === "desc" ? ArrowDownIcon : ArrowUpDownIcon;
  return (
    <Button
      variant="ghost"
      size="sm"
      className={cn("-ml-2 h-7 px-2 font-medium", align === "right" && "-mr-2 ml-auto flex")}
      onClick={() => column.toggleSorting(s === "asc")}
    >
      {label}
      <Icon className={cn("size-3.5", !s && "text-muted-foreground")} />
    </Button>
  );
}