import { createColumnHelper } from "@tanstack/react-table";
import { ArrowDown, ArrowUp } from "lucide-react";
import { Button } from "@/components/ui/button";

export const GenericColumn = ({ columnName }: { columnName: string }) => {
	const columnHelper = createColumnHelper();

	return columnHelper.accessor(`${columnName}`, {
		header: ({ column }) => {
			return (
				<Button
					variant="ghost"
					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
				>
					<span className="flex flex-row gap-2">{`${columnName.toUpperCase()}`}</span>
					{column.getIsSorted() === "asc" ? (
						<ArrowUp className="ml-2 h-4 w-4" />
					) : (
						<ArrowDown className="ml-2 h-4 w-4" />
					)}
				</Button>
			);
		},
		cell: (i) => i.getValue(),
	});
};