import React from 'react';
import classnames from 'classnames';

interface MetaDataItems {
  name?: string;
  email?: string;
  company?: string;
}

interface Props {
  items: MetaDataItems,
  isCentered: boolean,
}

export const ProfileMetaBox = ({ items, isCentered }: Props) => {
  const metaBoxClass = classnames('c-meta-box', { 'c-meta-box--text-centered': isCentered });

  return <div className={metaBoxClass}>
    {Object.keys(items).map((propertyName) =>
      <span key={propertyName} className={`c-meta-box__${propertyName}`}>{items[propertyName]}</span>
    )}
  </div>;
};