import React from 'react';

const JtlRenderer = (params) => {
  const hasJTL = params.value;
  
  // Handle undefined state (database unavailable)
  if (hasJTL === undefined) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
        <div style={{ 
          width: '12px', 
          height: '12px', 
          borderRadius: '50%', 
          backgroundColor: '#fff3cd', 
          border: '1px solid #ffc107', 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center',
          fontSize: '8px',
          color: '#856404',
          fontWeight: 'bold'
        }}>
          ?
        </div>
      </div>
    );
  }
  
  const backgroundColor = hasJTL ? '#388e3c' : '#f5f5f5';
  const border = hasJTL ? 'none' : '1px solid #ccc';
  
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
      <div style={{ 
        width: '12px', 
        height: '12px', 
        borderRadius: '50%', 
        backgroundColor: backgroundColor, 
        border: border, 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'center',
        fontSize: '8px',
        color: 'white',
        fontWeight: 'bold'
      }}>
        {hasJTL && '✓'}
      </div>
    </div>
  );
};

export default JtlRenderer;