import type { Column } from '@tanstack/react-table';
import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react';
import { cn } from '@/lib/utils';

type DataTableColumnHeaderProps<TData, TValue> = {
    column: Column<TData, TValue>;
    title: string;
    className?: string;
};

export function DataTableColumnHeader<TData, TValue>({
    column,
    title,
    className,
}: DataTableColumnHeaderProps<TData, TValue>) {
    if (!column.getCanSort()) {
        return <div className={cn(className)}>{title}</div>;
    }

    const sortDirection = column.getIsSorted();

    return (
        <button
            type="button"
            className={cn(
                '-ms-1 inline-flex h-8 items-center gap-1 rounded-md px-1 text-sm font-medium text-foreground transition-colors hover:bg-transparent hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-0',
                className,
            )}
            onClick={() => column.toggleSorting()}
        >
            <span>{title}</span>
            {sortDirection === 'desc' ? (
                <ArrowDown className="size-3.5" />
            ) : sortDirection === 'asc' ? (
                <ArrowUp className="size-3.5" />
            ) : (
                <ChevronsUpDown className="size-3.5 text-muted-foreground" />
            )}
        </button>
    );
}