import React, { useState, useEffect } from 'react';
import { ArrowUpward, ArrowDownward } from '@mui/icons-material';

const SortHeader = (params) => {
  const [sortState, setSortState] = useState(null);
  
  // Update sort state when it changes
  useEffect(() => {
    const updateSortState = () => {
      const currentSort = params.column?.getSort();
      setSortState(currentSort);
    };
    
    // Initial sort state
    updateSortState();
    
    // Listen for sort changes
    if (params.api) {
      params.api.addEventListener('sortChanged', updateSortState);
      return () => {
        // Check if grid API is still valid before removing listener
        if (params.api && !params.api.isDestroyed()) {
          params.api.removeEventListener('sortChanged', updateSortState);
        }
      };
    }
  }, [params.api, params.column]);

  const handleSort = (direction, event) => {
    if (params.setSort) {
      params.setSort(direction, event.shiftKey);
    }
  };

  return (
    <div style={{ 
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100%',
      width: '100%',
      gap: 0,
      backgroundColor: '#f8f9fa',
      borderBottom: '1px solid #dee2e6'
    }}>
      <ArrowUpward 
        sx={{ 
          fontSize: '10px', 
          color: sortState === 'asc' ? '#0969da' : '#ccc',
          opacity: sortState === 'asc' ? 1 : 0.5,
          cursor: 'pointer'
        }}
        onClick={(e) => handleSort('asc', e)}
      />
      <ArrowDownward 
        sx={{ 
          fontSize: '10px', 
          color: sortState === 'desc' ? '#0969da' : '#ccc',
          opacity: sortState === 'desc' ? 1 : 0.5,
          cursor: 'pointer'
        }}
        onClick={(e) => handleSort('desc', e)}
      />
    </div>
  );
};

export default SortHeader;