import React from 'react';
import { SortDirection } from '~/admin/hooks/useTableSort';

interface SortableTableHeaderProps {
  children: React.ReactNode;
  sortKey: string;
  currentSortKey: string | null;
  sortDirection: SortDirection;
  onSort: (key: string) => void;
  className?: string;
  sortable?: boolean;
}

export const SortableTableHeader: React.FC<SortableTableHeaderProps> = ({
  children,
  sortKey,
  currentSortKey,
  sortDirection,
  onSort,
  className = '',
  sortable = true,
}) => {
  const isActive = currentSortKey === sortKey && sortDirection !== null;
  const isAsc = isActive && sortDirection === 'asc';
  const isDesc = isActive && sortDirection === 'desc';

  const handleClick = () => {
    if (sortable) {
      onSort(sortKey);
    }
  };

  return (
    <th
      className={`sortable-header ${className} ${sortable ? 'sortable' : ''} ${isActive ? 'active' : ''}`}
      onClick={handleClick}
      style={{ cursor: sortable ? 'pointer' : 'default' }}
    >
            <div className={`sortable-header__content ${className}`}>
        <span>{children}</span>
        {sortable && (
          <span className="sortable-header__icons">
            <i
              className={`fas fa-arrow-up sortable-header__icon sortable-header__icon--up ${
                isAsc ? 'active' : ''
              }`}
            />
            <i
              className={`fas fa-arrow-down sortable-header__icon sortable-header__icon--down ${
                isDesc ? 'active' : ''
              }`}
            />
          </span>
        )}
      </div>
    </th>
  );
};