import classNames from 'classnames';
import React, { FC, ReactType, ReactNode } from 'react';

import style from './index.module.css';

export interface TextWithImageProps {
  Image?: ReactType;
  ImageProps?: unknown;
  title: string;
  text?: ReactNode;
  imagePosition?: string;
}

const TextWithImage: FC<TextWithImageProps> = ({
  Image,
  ImageProps = {},
  imagePosition = 'Left',
  title,
  text,
}) => {
  const textWithImageClassNames = classNames(style.textWithImage, {
    [`${style[`textWithImage${`Image${imagePosition || 'Left'}`}`]}`]:
      imagePosition || 'Left',
  });

  return (
    <div className={textWithImageClassNames}>
      <div className={style.textWithImage__inner}>
        <div className={style.textWithImage__image}>
          {Image && ImageProps && <Image {...ImageProps} />}
        </div>
        <div className={style.textWithImage__contentWrap}>
          <div className={style.textWithImage__titleWrap}>
            <h3 className={style.textWithImage__title}>{title}</h3>
          </div>
          {text && (
            <div className={style.textWithImage__content}>
              {text && <div className={style.textWithImage__text}>{text}</div>}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default TextWithImage;