'use client';

import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
import type { SortDir } from '../hooks/use-table-sort';

interface SortableHeaderProps {
  label: string;
  active: SortDir | null;
  onClick: () => void;
  align?: 'left' | 'right';
  className?: string;
}

export function SortableHeader({ label, active, onClick, align = 'left', className = '' }: SortableHeaderProps) {
  const Icon = active === 'asc' ? ArrowUp : active === 'desc' ? ArrowDown : ArrowUpDown;
  return (
    <th
      className={`pb-3 font-medium cursor-pointer select-none hover:text-foreground ${align === 'right' ? 'text-right' : ''} ${className}`}
      onClick={onClick}
      title={`Ordenar por ${label.toLowerCase()}`}
    >
      {label}
      <Icon className={`h-3 w-3 inline-block ml-1 ${active ? '' : 'opacity-40'}`} />
    </th>
  );
}
