import React, { ReactNode } from 'react';
import cx from 'classnames';
import HoverInfo from '../hoverInfo/hoverInfo';

interface LockedTextProps {
  text: string;
  extraClass?: string;
  hoverInfo?: ReactNode;
}

const LockedText = ({ extraClass, text, hoverInfo }: LockedTextProps) => (
  <p className={cx('c-locked-text', extraClass)}>
    {text}
    {hoverInfo 
      ? <HoverInfo 
        icon="icon-lock" 
        position="right" 
        extraClass='u-color--dark-grey u-font-size--normal u-margin-left--small'>
        {hoverInfo}
      </HoverInfo>
      : <i className="icon-lock u-color--dark-grey u-margin-left--small" />}
  </p>
);

export default LockedText;