import type {ReactNode} from "react";

type SortableHeaderCellProps = {
    field: string;
    active: boolean;
    icon: ReactNode;
    onSort: (field: string) => void;
    children: ReactNode;
};

export const SortableHeaderCell = ({
                                       field,
                                       active,
                                       icon,
                                       onSort,
                                       children,
                                   }: SortableHeaderCellProps) => {
    return (
        <th scope="col">
            {children}
            <button
                className={`sort sortBtn ${active ? 'active' : ''}`}
                onClick={() => onSort(field)}
            >
                {icon}
            </button>
        </th>
    );
};