import React from 'react';

const FilterableHeader = ({ 
  sortKey, 
  filterKey, 
  children, 
  sortConfig, 
  onSort, 
  columnFilters, 
  onFilterChange, 
  showFilterDropdown, 
  setShowFilterDropdown 
}) => {
  return (
    <div className="filterable-header" style={{ position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <span
          onClick={() => onSort(sortKey)}
          style={{ cursor: 'pointer', flex: 1 }}
        >
          {children}
          {sortConfig && sortConfig.key === sortKey && (
            <span style={{ marginLeft: '4px' }}>
              {sortConfig.direction === 'asc' ? '↑' : '↓'}
            </span>
          )}
        </span>
        <button
          onClick={() => setShowFilterDropdown(showFilterDropdown === filterKey ? null : filterKey)}
          style={{
            background: 'none',
            border: 'none',
            cursor: 'pointer',
            padding: '2px',
            fontSize: '12px',
            color: '#6b7280'
          }}
        >
          🔍
        </button>
      </div>
      {showFilterDropdown === filterKey && (
        <div style={{
          position: 'absolute',
          top: '100%',
          left: 0,
          background: 'white',
          border: '1px solid #e2e8f0',
          borderRadius: '6px',
          padding: '8px',
          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
          zIndex: 1000,
          minWidth: '150px'
        }}>
          <input
            type="text"
            placeholder={`Filter ${children}...`}
            value={columnFilters[filterKey] || ''}
            onChange={(e) => onFilterChange({
              ...columnFilters,
              [filterKey]: e.target.value
            })}
            style={{
              width: '100%',
              padding: '4px 8px',
              border: '1px solid #d1d5db',
              borderRadius: '4px',
              fontSize: '12px'
            }}
            autoFocus
          />
        </div>
      )}
    </div>
  );
};

export default FilterableHeader;
