accounts-frontend/packages/app/components/profile/ProfileField.tsx

import React from 'react';
import { Link } from 'react-router-dom';

import styles from './profile.scss';

function ProfileField({
  label,
  value,
  warningMessage,
  link,
  onChange,
}: {
  label: React.ReactNode;
  link?: string;
  onChange?: () => void;
  value: React.ReactNode;
  warningMessage?: React.ReactNode;
}) {
  let Action: React.ElementType | null = null;

  if (link) {
    Action = (props) => <Link to={link} {...props} />;
  }

  if (onChange) {
    Action = (props) => <a {...props} onClick={onChange} href="#" />;
  }

  return (
    <div className={styles.paramItem} data-testid="profile-item">
      <div className={styles.paramRow}>
        <div className={styles.paramName}>{label}</div>
        <div className={styles.paramValue}>{value}</div>

        {Action && (
          <Action
            to={link}
            className={styles.paramAction}
            data-testid="profile-action"
          >
            <span className={styles.paramEditIcon} />
          </Action>
        )}
      </div>

      {warningMessage && (
        <div className={styles.paramMessage}>{warningMessage}</div>
      )}
    </div>
  );
}

export default ProfileField;