import { ArrowUpDown, Eye, EyeOff } from 'lucide-react'
import { memo } from 'react'

import type { StoreDataField } from '../types'

export interface TableHeaderProps {
  title: string  // Добавлено title для совместимости с TableHeadersBlock
  field: StoreDataField  // Сделано обязательным
  sortField: StoreDataField  // Сделано обязательным
  sortOrder: 'asc' | 'desc'  // Сделано обязательным
  onSort: (field: StoreDataField) => void  // Сделано обязательным
  className?: string  // Добавлено className для кастомных стилей
  showAdditional?: boolean  // Переименовано из showAdditionalValues
  additionalTitle?: string  // Добавлено для показа дополнительного заголовка
  children?: React.ReactNode  // Сделано опциональным для обратной совместимости
}

/**
 * Компонент заголовка таблицы с поддержкой сортировки
 * 
 * Особенности:
 * - Поддержка сортировки по полю
 * - Индикатор направления сортировки  
 * - Специальная кнопка для переключения доп. значений (колонка pvzReturns)
 * - Hover эффекты для интерактивности
 */
export const TableHeader = memo<TableHeaderProps>(function TableHeader({
  title,
  field,
  sortField,
  sortOrder,
  onSort,
  className = '',
  showAdditional = false,
  additionalTitle,
  children,  // Для обратной совместимости
}) {
  const handleSort = () => {
    if (field && onSort) {
      onSort(field)
    }
  }

  const isActive = sortField === field
  const displayTitle = children || title

  return (
    <div
      className={`cursor-pointer hover:bg-white/10 hover:text-white transition-colors flex items-center space-x-1 px-2 py-1 rounded ${className}`}
      onClick={handleSort}
    >
      <div className="flex items-center space-x-1">
        <span className="text-xs font-medium uppercase tracking-wider">
          {displayTitle}
        </span>
        
        <ArrowUpDown 
          className={`h-3 w-3 transition-colors ${
            isActive ? 'text-blue-400' : 'text-white/40'
          }`} 
        />
        
        {/* Дополнительный заголовок */}
        {showAdditional && additionalTitle && (
          <span className="text-[10px] text-white/50 ml-1">
            {additionalTitle}
          </span>
        )}
      </div>
    </div>
  )
})

TableHeader.displayName = 'TableHeader'