const joinName = ({ firstName, lastName }) => `${firstName} ${lastName}`;

const withBold = name => <strong>{name}</strong>;

const withTitle = (component, title) =>
  title ? <>{component} - <em>{title}</em></> : component;

const withRole = (component, role) =>
  role ? <>{component} <span className="role-tag">{role}</span></> : component;

const withShouting = (component, shout) =>
  shout ? <span style={{ textTransform: 'uppercase' }}>{component}</span> : component;

const compose = (...fns) => data => fns.reduce((acc, fn) => fn(acc), data);

const joinNameWithProps = compose(
  joinName,
  withBold,
  component => withTitle(component, 'Optional Title'),
  component => withRole(component, 'Admin'),
  component => withShouting(component, true)
);

// Sử dụng
const finalComponent = joinNameWithProps({ firstName: 'Nguyen', lastName: 'An' });