edr-platform/apps/edr-freight-web/backoffice/src/shared/common/ui/dataTableColumnHeader.tsx

import { Column } from "@tanstack/react-table";
import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react";

import { cn } from "@/shared/lib/utils";
import { Button } from "@/shared/common/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/shared/common/ui/dropdown-menu";

interface DataTableColumnHeaderProps<TData, TValue>
  extends React.HTMLAttributes<HTMLDivElement> {
  column: Column<TData, TValue>;
  title: string;
}

export function DataTableColumnHeader<TData, TValue>({
  column,
  title,
  className,
}: DataTableColumnHeaderProps<TData, TValue>) {
  if (!column.getCanSort()) {
    return <div className="bg-gray-50 dark:bg-gray-800 text-base text-gray-500 dark:text-gray-400">{title}</div>;
  }

  return (
    <div className={cn("flex items-center space-x-2", className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            size="sm"
            className="-ml-3 h-8 data-[state=open]:bg-accent dark:data-[state=open]:bg-gray-700"
          >
            <span className="bg-gray-50 dark:bg-gray-800 text-base text-gray-500 dark:text-gray-400">{title}</span>
            {column.getIsSorted() === "desc" ? (
              <ArrowDown className="h-4 w-4 dark:text-gray-400" />
            ) : column.getIsSorted() === "asc" ? (
              <ArrowUp className="h-4 w-4 dark:text-gray-400" />
            ) : (
              <ChevronsUpDown className="h-4 w-4 dark:text-gray-400" />
            )}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" className="dark:bg-gray-800 dark:border-gray-700">
          <DropdownMenuItem onClick={() => column.toggleSorting(false)} className="dark:text-gray-200 dark:hover:bg-gray-700">
            <ArrowUp className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
            Asc
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => column.toggleSorting(true)} className="dark:text-gray-200 dark:hover:bg-gray-700">
            <ArrowDown className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
            Desc
          </DropdownMenuItem>
          <DropdownMenuSeparator className="dark:bg-gray-700" />
          <DropdownMenuItem onClick={() => column.toggleVisibility(false)} className="dark:text-gray-200 dark:hover:bg-gray-700">
            <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
            Hide
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}