import React from 'react';

interface KeyValueFieldProps {
  label: string;
  value?: string | number | null;
  icon?: React.ReactNode;
  isMono?: boolean;
  className?: string;
}

/**
 * Componente minimalista de Clave-Valor compatible con el SaaS Design System de Eneon.
 */
export const KeyValueField: React.FC<KeyValueFieldProps> = ({
  label,
  value,
  icon,
  isMono = false,
  className = '',
}) => {
  const hasValue = value !== undefined && value !== null && String(value).trim() !== '';

  return (
    <div className={`saas-kv ${className}`.trim()}>
      <span className="saas-kv-label">{label}</span>
      <div className={`saas-kv-value ${isMono ? 'mono' : ''} ${!hasValue ? 'saas-kv-empty' : ''}`}>
        {icon && (
          <span style={{ marginRight: '4px', display: 'inline-flex', alignItems: 'center', opacity: 0.65 }}>
            {icon}
          </span>
        )}
        <span>{hasValue ? String(value) : '—'}</span>
      </div>
    </div>
  );
};

export default KeyValueField;