import React, { ReactNode } from 'react';
import cx from 'classnames';
import * as Text from 'app/shared/components/text/text';

interface Props {
  children: ReactNode,
  text: string,
  position?: 'right' | 'left' | 'top' | 'responsive-top'
}

const CustomHtmlTitle = ({ children, text, position='top' }: Props) => {

  const contentClass = cx(
    `c-custom-title__info-content`,
    `c-custom-title__info-content--position-${position}`
  );
  return (
    <div className="c-custom-title__info u-color--primary-deep">
      {children}
      <div className={contentClass}>
        <Text.Caption extraClass="c-custom-title__info-text">
          {text}
        </Text.Caption>
      </div>
    </div>
  );
};

export { CustomHtmlTitle };