import { ArrowUpDown } from 'lucide-react';

import { cn } from '@/lib/utils';

type SortableColumnHeaderProps = {
    label: string;
    onSort: () => void;
    className?: string;
};

/** Compact sort control aligned with `TableHead` (text-[11px], icon 12px). */
export function SortableColumnHeader({ label, onSort, className }: SortableColumnHeaderProps) {
    return (
        <button
            type="button"
            onClick={onSort}
            className={cn(
                '-mx-0.5 inline-flex max-w-full items-center gap-1 rounded px-1 py-0.5 text-left',
                'text-[11px] font-semibold leading-tight text-foreground/85',
                'hover:bg-muted/45 hover:text-foreground',
                'outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
                className,
            )}
        >
            <span className="min-w-0 truncate">{label}</span>
            <ArrowUpDown className="size-3 shrink-0 opacity-55" aria-hidden />
        </button>
    );
}