import React from 'react';

const RecipientRenderer = (params) => {
  const isIbanColumn = params.colDef.field === 'Kontonummer/IBAN';
  const value = params.value;

  const handleClick = (event) => {
    if (isIbanColumn && value && params.api) {
      // Stop event propagation to prevent row selection
      event.stopPropagation();
      
      // Apply filter to IBAN column using the custom IbanSelectionFilter format
      const currentFilterModel = params.api.getFilterModel();
      params.api.setFilterModel({
        ...currentFilterModel,
        'Kontonummer/IBAN': {
          filterType: 'iban-selection',
          values: [value]
        }
      });
    }
  };

  return (
    <span 
      style={{ 
        fontSize: '0.7rem', 
        lineHeight: '1.2',
        cursor: isIbanColumn && value ? 'pointer' : 'default',
        color: isIbanColumn && value ? '#1976d2' : 'inherit',
        textDecoration: isIbanColumn && value ? 'underline' : 'none'
      }}
      onClick={isIbanColumn && value ? handleClick : undefined}
      title={isIbanColumn && value ? `Nach IBAN "${value}" filtern` : undefined}
    >
      {value}
    </span>
  );
};

export default RecipientRenderer;